通过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实时检测文本框内容长度的更多相关文章

  1. 通过js实时检测文本框内容

    思路 1,在获取文本框焦点后,启动定时器,每隔100毫秒来查看文本内容的改变 2,在文本框失去焦点后,清除定时器 下面是一个简单的例子 <!DOCTYPE html> <html&g ...

  2. js监听文本框内容变化

    js监听文本框内容变化 原理很简单,就是在外部先声明一个用来记录input值的变量,然后每0.1秒比较这个值与input的值,如果发生改变,则运行自己的代码,同时改变变量.从而实现对input值改变的 ...

  3. JS来推断文本框内容改变事件

       oninput,onpropertychange,onchange的使用方法 onchange触发事件必须满足两个条件: a)当前对象属性改变,而且是由键盘或鼠标事件激发的(脚本触发无效) b) ...

  4. JS、JQury - 文本框内容改变事件

    例子: 效果: 前端代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="De ...

  5. js 实时计算文本框字数限制

    $.fn.myTarea = function(){ return this.each(function(){ $(this).bind('input propertychange', functio ...

  6. 同步文本框内容的JS代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. js获取子节点和修改input的文本框内容

    js获取子节点和修改input的文本框内容 js获取子节点: $("#"+defaultPVItemId).children().eq(3); //获取某个选择器下的第四个子节点 ...

  8. JS和vue文本框输入改变p标签的内容测试

    文本框输入,p标签的内容自动变成文本框的内容,如下是三种方法的测试: 方法1:JS里的onchange,当文本框内容改变事件,该事件里写的方法是,获取p标签本身,然后获取文本框的值,赋值给变量,最后给 ...

  9. JS事件 文本框内容改变事件(onchange)通过改变文本框的内容来触发onchange事件,同时执行被调用的程序。

    文本框内容改变事件(onchange) 通过改变文本框的内容来触发onchange事件,同时执行被调用的程序. 如下代码,当用户将文本框内的文字改变后,弹出对话框"您改变了文本内容!&quo ...

随机推荐

  1. Kinect 摄像头范围介绍和玩家舒适距离实测

    本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接: http://blog.csdn.net/cartzhang/article/details/44588097 作者:ca ...

  2. Windows7系统下安装OpenSSL攻略

    Windows7系统下安装OpenSSL攻略 http://blog.chinaunix.net/uid-20479991-id-216269.html http://my.oschina.net/s ...

  3. 单个和多个checkbox选中事件怎么写

    单个和多个checkbox选中事件怎么写 一.总结 一句话总结: 1.checkbox的事件方法的话主要是change和click 2.checkbox的属性判断的话主要是prop(判断checked ...

  4. 古语云:工欲善其事必先利其器 --> 最新、最全的 IntelliJ IDEA(2018.3.3) 的介绍、安装、破解、配置与使用

    原文:古语云:工欲善其事必先利其器 --> 最新.最全的 IntelliJ IDEA(2018.3.3) 的介绍.安装.破解.配置与使用 一.IntelliJ IDEA 介绍 -> Ecl ...

  5. scala读写文件 comparing values of types Unit and Int using `!=' will always yield true

    由于scala没有对写入文件的支持,所以写文件时通常借助java进行IO操作 //方式一(小文件) /* val s1 = Source.fromFile("D:\\inputword\\h ...

  6. WPF入门(三)->两个几何图形合并(CombinedGeometry)

    原文:WPF入门(三)->两个几何图形合并(CombinedGeometry) 在WPF中,提供了一个CombinedGeometry对象可以使两个几何图形合并产生效果 CombinedGeom ...

  7. Eclipse 学习总结

    一. Eclipse 中一个普通 JavaWeb 项目的目录结构 如果项目工程中没有web.xml文件,可以手动动态添加.        右击项目 ->  java EE Tools  -> ...

  8. 类的XML序列化(XML Serialization)

    最近做的一个ASP.NET项目中,需要在一个页面中维护一个类的数组,在每次页面刷新的使其前一次的状态保持不变.开始错误的使用了static,导致了致命的共享错误.后来突然想起C#类能够使用XML序列化 ...

  9. IComparable与排序

    IComparable:一种特定于类型的通用比较方法,值类型或类通过实现此方法对特认定进行排序. IComparable的作用是提供了一种比较两个对象的特定类型的方法.这是必需的如果您想要为对象提供任 ...

  10. jsonkit 分解nsarray 时刻 一个错误

    jsonkit 分解nsarray 时刻 一个错误 Assertion failure in -[TXJKArray count], /Users/mqq/hudson/1740/src/Tencen ...