div可编辑如何限制字数

1、打开一个文本编辑器，小编用的是DW，开始编辑网页。

首先在页面中插入一个div，起一个id，因为要用到js。并给一些样式，也就是让其在网页上看着明显。

2、接下来添加一个script标签，并写一段加载事件代码。这也许是javascript的一个例行公式，哈哈。

<script>

window.onloat=function(){}

</script>

3、接下来，要分析如何让div变成可编辑。如果让div变成可编辑，无非就是使用contentEditable，让其变成“true”。

这里要注意，这一属性，样式不支持，只能使用在行间或javascript等脚本中。

接下来就是使用js让div变成可编辑。

继续添中代码，首先声明一个变量，获取div。这时可以使用getElementById获取。接下来设置div的contentEditable属性为true.代码如下：

var oDiv=document.getElementById("div1");     //通过id名获取div

oDiv.contentEditable=true;   //设置div为可编辑

到这里div1就已经具备了可编辑。

4、接下来要做的就是，让div限制用户输入字符长度。

对于div而其内容就是innerHTML，如果想要获得其长度，可直接使用length即可。设置一个长度，如果输入长度，超出已设置长度就做一些对应操作，如让div失去焦点等等。因为我们要对键盘输入事件做判断，所以就选择一个事件来写代码了，具体代码如下：

oDiv.onkeyup=function(){       //当键盘弹起时触发

    if(oDiv.innerHTML.length>10){    //当div中内容长度大于10

        this.innerHTML=this.innerHTML.substring(0,10);   //取前10个字符

        this.blur();                  //让div失去焦点

}

5、到这里div设置可编辑并限制字数代码全部写完了。接下来我们就可以打开浏览器来测试了，为了更直观的观察，我在代码中加了一行弹框，当然这只是为了测试，实际工作中不需要。

6、这里还要说明一点，在使用innerHTML获得长度时有一个可能是肯定会出现的。就是字符数显示不准确。其造成这类原因也很简单，就是html部分。如下面这2个行代获取到的长度是不一样的。

<div>123</div>     //这时的长度为3

<div>

123

</div>                    //这时的长度为7

如果出现字符长度和你预计长度不同，可以检查一下html部分。