码迷,mamicode.com
首页 > Web开发 > 详细

JS实时检测文本框内容长度

时间:2017-11-28 19:59:37      阅读:483      评论:0      收藏:0      [点我收藏+]

标签:counter   ntb   string   XML   substr   col   images   att   属性   

 

 

 

通过js代码实时监测,文本框内容的变化以及长度,下图是一个实际使用场景。

 

技术分享图片  

HTML部分:

  1. <input id="Text1" type="text" onkeyup="TmaxLength(this)"/>
  2. <span id="Counter" style="color: red;">0</span>  

JS部分

  //实时更新输入框文字长度
  function TmaxLength(x) {
    //x.getAttribute是判断是否为DOM结构
    var nMaxLen = x.getAttribute ? parseInt(x.getAttribute("maxlength")) : "";
    if (x.getAttribute && x.value.length > nMaxLen) {
    x.value = x.value.substring(0, nMaxLen);
  }
    document.getElementById("Counter").innerHTML = x.value.length;
  }

  *注意:对于可编辑div的话,不能用value属性,改为innerText,且会涉及到光标位置的问题,下篇文章会写到光标定位。

 

JS实时检测文本框内容长度

标签:counter   ntb   string   XML   substr   col   images   att   属性   

原文地址:http://www.cnblogs.com/bmmx/p/7911518.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!