要在contentEditable分区中显示输入的字符数,你可以使用JavaScript来实现这一功能。以下是一个简单的示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Character Count in contentEditable</title>
</head>
<body>
<div id="editableDiv" contenteditable="true" style="border: 1px solid black; padding: 10px;">
Type something here...
</div>
<p>Character count: <span id="charCount">0</span></p>
<script>
const editableDiv = document.getElementById('editableDiv');
const charCountSpan = document.getElementById('charCount');
editableDiv.addEventListener('input', () => {
const text = editableDiv.innerText;
const charCount = text.length;
charCountSpan.textContent = charCount;
});
</script>
</body>
</html>
div
元素,并设置contenteditable="true"
,使其可编辑。span
元素,用于显示字符数。div
和span
元素的引用。div
元素添加input
事件监听器,当用户输入时触发。div
元素的文本内容,并计算其长度。span
元素的文本内容,显示当前的字符数。innerText
而不是textContent
来获取文本内容,因为innerText
会考虑输入法的临时字符。通过以上方法,你可以有效地在contentEditable分区中显示输入的字符数,并解决可能遇到的问题。
领取专属 10元无门槛券
手把手带您无忧上云