div可编辑如何限制字数
- 原创
- |
- 浏览:3105
- |
- 更新:
在设计网页时div的使用率可谓是最高的。我们都知道div默认状态下是不支持可编辑的,但这并不意味着它不可以。那么具体怎么做才能让div也具备可编辑状态呢?那就跟着小编来看看吧!
方法/步骤
打开一个文本编辑器,小编用的是DW,开始编辑网页。
首先在页面中插入一个div,起一个id,因为要用到js。并给一些样式,也就是让其在网页上看着明显。
接下来添加一个script标签,并写一段加载事件代码。这也许是javascript的一个例行公式,哈哈。
<script>
window.onloat=function(){}
</script>
接下来,要分析如何让div变成可编辑。如果让div变成可编辑,无非就是使用contentEditable,让其变成“true”。
这里要注意,这一属性,样式不支持,只能使用在行间或javascript等脚本中。
接下来就是使用js让div变成可编辑。
继续添中代码,首先声明一个变量,获取div。这时可以使用getElementById获取。接下来设置div的contentEditable属性为true.代码如下:
var oDiv=document.getElementById("div1"); //通过id名获取div
oDiv.contentEditable=true; //设置div为可编辑
到这里div1就已经具备了可编辑。
- 该信息未经许可获取自百度经验
接下来要做的就是,让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失去焦点
}
到这里div设置可编辑并限制字数代码全部写完了。接下来我们就可以打开浏览器来测试了,为了更直观的观察,我在代码中加了一行弹框,当然这只是为了测试,实际工作中不需要。
这里还要说明一点,在使用innerHTML获得长度时有一个可能是肯定会出现的。就是字符数显示不准确。其造成这类原因也很简单,就是html部分。如下面这2个行代获取到的长度是不一样的。
<div>123</div> //这时的长度为3
<div>
123
</div> //这时的长度为7
如果出现字符长度和你预计长度不同,可以检查一下html部分。
END