用div做输入框，如何限制输入的纯文本字数

chenzym 2014-05-09 10:58:59

 <div id="txt" contenteditable="true"  border: 1px solid #E1E1E1; overflow: auto;">

...全文

2572 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

ddwren 2014-05-09

打赏
举报

<html>
    <head>
        <title></title>
    </head>
    <body>
    	<div id="txt" contenteditable="true" style="border: 1px solid #E1E1E1; overflow: auto;"></div>
    </body>
    <script type="text/javascript">
     window.onkeydown = function(){
     	debugger;
     	var len = document.getElementById('txt').innerHTML.length;
     	if(len > 10) {
     		return false;
     	}
     }
    </script>
</html>

mmqw 2014-05-09

打赏
举报

直接在按键按下的时候获取，判断下div中文本已有的长度，不就行了

未知数 2014-05-09

打赏
举报

对纯文本的定义？用正则表达式筛掉你认为的非纯文本后获取字符串长度，keydown事件中判断一下，达到限制则return fasle即可

别闹腰不好 2014-05-09

打赏
举报

innerHTML.length

chenzym 2014-05-09

打赏
举报

引用 5 楼 cz_2012 的回复:

多谢几位的回复。由于在div中输入文本，用innerHTML获取会有<br/>或者\n 这些标签，所以在计算文本长度的时候需要过滤掉这些标签。我在keydown事件里用网上找的这个函数来过滤：
function removeHTMLTag(str) {
    str = str.replace(/<\/?[^>]*>/g, ''); //去除HTML tag
    str = str.replace(/[ | ]*\n/g, ''); //去除行尾空白
    str = str.replace(/ /ig, ''); //去掉 
    return str;
}

在div里敲空格会有 $nbsp; 改一下上面的方法


function removeHTMLTag(str) {
    str = str.replace(/<\/?[^>]*>/g, ''); //去除HTML tag
    str = str.replace(/[ | ]*\n/g, ''); //去除行尾空白
    str = str.replace(/ /ig, ''); //去掉尾部空格
    return str;
}

chenzym 2014-05-09

打赏
举报

多谢几位的回复。由于在div中输入文本，用innerHTML获取会有<br/>或者\n 这些标签，所以在计算文本长度的时候需要过滤掉这些标签。我在keydown事件里用网上找的这个函数来过滤：


function removeHTMLTag(str) {
    str = str.replace(/<\/?[^>]*>/g, ''); //去除HTML tag
    str = str.replace(/[ | ]*\n/g, ''); //去除行尾空白
    str = str.replace(/ /ig, ''); //去掉 
    return str;
}