限制ContentEditable div中的字符数

Question

我在我的Web应用程序中使用了contenteditable div元素,我正在尝试提出一个限制区域中允许的字符数量的解决方案,一旦达到限制,尝试输入字符就什么都不做.这是我到目前为止:

var content_id = 'editable_div';

//binding keyup/down events on the contenteditable div
$('#'+content_id).keyup(function(){ check_charcount(content_id, max); });
$('#'+content_id).keydown(function(){ check_charcount(content_id, max); });

function check_charcount(content_id, max)
{   
    if($('#'+content_id).text().length > max)
    {
        $('#'+content_id).text($('#'+content_id).text().substring(0, max));
    }
}

此DOES将字符数限制为"max"指定的数字,但是一旦通过jquery .text()函数设置了区域的文本,光标就会将自身重置为该区域的开头.因此,如果用户继续键入,则新输入的字符将插入文本的开头,并且将删除文本的最后一个字符.所以,我只需要一些方法将光标保持在可信区域文本的末尾.

Answer 1

如果将event对象传递给您的函数并e.preventDefault()在达到最大值时调用该怎么办？

var content_id = 'editable_div';  

max = 10;

//binding keyup/down events on the contenteditable div
$('#'+content_id).keyup(function(e){ check_charcount(content_id, max, e); });
$('#'+content_id).keydown(function(e){ check_charcount(content_id, max, e); });

function check_charcount(content_id, max, e)
{   
    if(e.which != 8 && $('#'+content_id).text().length > max)
    {
       // $('#'+content_id).text($('#'+content_id).text().substring(0, max));
       e.preventDefault();
    }
}

虽然,您可能需要做更多的事情以允许用户执行"删除"之类的操作.

编辑:

添加了对"删除"键的支持.

编辑2:

此外,你可能可以摆脱keyup处理程序.keydown应该够了.

Answer 2

实现这一目标的简单方法:

<div onkeypress="return (this.innerText.length <= 256)" contenteditable="true">

Answer 3

首先,这种事情对用户来说很烦人:我建议改为做类似于StackOverflow的注释字段,它允许你输入任意多或少的内容,向你显示一条消息,告诉你输入了多少个字符以及是否太多或太少,并且拒绝让您提交长度无效的评论.

其次,如果你真的必须限制文本的长度,<div>如果内容太长则替换每次击键的整个内容是不必要的昂贵,并且会使编辑器在较慢的机器上无响应.我建议处理keypress事件并简单地阻止在preventDefault()事件中使用插入的字符(或者在IE中,将事件设置returnValue为true,假设您正在使用attachEvent).这不会阻止用户粘贴文本,因此您需要处理paste事件(在Opera或Firefox <3中不存在,因此您需要某种基于轮询的解决方案).由于您无法提前访问正在粘贴的内容,因此您无法知道粘贴是否会超过字符限制,因此您需要设置计时器以便再次检查长度粘贴后.在所有情况下,第一种选择似乎比我更好.

Answer 4

这是完成这种最概括形式的最佳方式，对我来说非常有用！

<div contenteditable="true" name="choice1" class="textfield" max="255"></div>

<div contenteditable="true" name="choice1" class="textfield" max="255"></div>

Answer 5

这是我通过 jQuery 绑定实现的方式，只需将属性 data-input-length 添加到内容可编辑元素即可轻松实现。只需在文档中的任何位置添加 javascript 代码即可。

$(document).ready(function(){
	// Excempt keys(arrows, del, backspace, home, end);
	var excempt = [37,38,39,40,46,8,36,35];
	// Loop through every editiable thing
	$("[contenteditable='true']").each(function(index,elem) {
	    var $elem = $(elem);
	    // Check for a property called data-input-length="value" (<div contenteditiable="true" data-input-length="100">)
	    var length = $elem.data('input-length');
	    // Validation of value
	    if(!isNaN(length)) {
	    	// Register keydown handler
	        $elem.on('keydown',function(evt){
	        	// If the key isn't excempt AND the text is longer than length stop the action.
	            if(excempt.indexOf(evt.which) === -1 && $elem.text().length > length) {
	               evt.preventDefault();
	               return false;
	            }
	        });
	    }
	});
});

div {
  background-color:#eee;
  border: 1px solid black;
  margin:5px;
  width:300px;
  height:100px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true" data-input-length="100">
You can type a 100 characters here
</div>
<div contenteditable="true" data-input-length="150">
You can type a 150 characters here
</div>
<div contenteditable="true" data-input-length="10">
You can type a 10 characters here
</div>