通过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,且会涉及到光标位置的问题,下篇文章会写到光标定位。

最新文章

  1. http status code
  2. 基于node.js的压缩合并安装
  3. wpf模仿QQ表情
  4. 用jquery编写的分页插件
  5. 重温CSS之背景、文本样式
  6. ArrayList与LinkedList实现比较
  7. Java中的Classpath
  8. jvm学习一:类加载过程详解
  9. JavaApi
  10. web测试笔记
  11. too many open files(打开的文件过多)解决方法
  12. Appium的工作原理
  13. Svn启动窗口报错 Could not load file or assembly &#39;SharpSvn.dll&#39; or one of its
  14. WinRT IO相关整理
  15. 多媒体文件格式解析之MP3
  16. 新增的input
  17. Web前端开发工程师常用技术网站整理
  18. ubuntu下超强的截图工具scrot
  19. 【分享】BS大神的C++ 11 keynotes
  20. INIT_WORK

热门文章

  1. Make chrome extension
  2. C语言实现使用动态数组来构造栈结构
  3. 【t097】寄存器
  4. NOIP模拟 Math - 数学
  5. CSS布局--左侧自适应母元素高度
  6. Tomcat下部署SpringBoot
  7. [UWP]在应用开发中安全使用文件资源
  8. linux 静态库和动态库(共享库)的制作与使用(注意覆盖问题)
  9. 数学思想方法-python计算战(8)-机器视觉-二值化
  10. PHP正则表达式入门教程[转]