通过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. [CSS] Change the auto-placement behaviour of grid items with grid-auto-flow

    We can change the automatic behaviour of what order our grid items appear. We can even re-order the ...

  2. FullPage.js全屏滚动插件解说

    1.主要功能 1).支持鼠标滚动 2).多个回调函数 3).支持手机.平板触屏事件 4).支持css3动画 5).支持窗口缩放 6).窗口缩放时自动调整 7).可设置滚动宽度.背景颜色.滚动速度.循环 ...

  3. [Postgres] Filter Data in a Postgres Table with Query Statements

    We have all this data, but how do we answer questions about it? In this lesson we’ll learn how to fi ...

  4. [React] Use React Context to Manage Application State Through Routes

    We’ll create a Router component that will wrap our application and manage all URL related state. We’ ...

  5. [NPM] Use package.json variables in npm scripts

    In this lesson we will show that you can leverage values that you already have provided in your pack ...

  6. 无法写入预编译头文件,由于 IO 设备错误,无法运行此项请求的错误的解决

    作者:朱金灿 来源:http://blog.csdn.net/clever101 早上查看服务器每日构建的情况,发现出现一个诡异的错误: fatal error C1085: 无法写入预编译头文件:& ...

  7. linux系统下信号具体解释2

    信号是UNIX 系统所使用的进程通信方法中,最古老的一种.信号不但能从内核发往一个进程,也能从一个进程发往还有一个进程.比如,用户在后台启动了一个要运行较长时间的程序,假设想中断其运行,能够用kill ...

  8. 利用WPF建立自己的3d gis软件(非axhost方式)(一)

    原文:利用WPF建立自己的3d gis软件(非axhost方式)(一) 先下载SDK:https://pan.baidu.com/s/1M9kBS6ouUwLfrt0zV0bPew 密码:1te1 地 ...

  9. 什么是“恶意代码”——————【Badboy】

    恶意代码是一种程序,它通过把代码在不被察觉的情况下镶嵌到还有一段程序中,从而达到破坏被感染电脑数据.执行具有入侵性或破坏性的程序.破坏被感染电脑数据的安全性和完整性的目的. 按传播方式,恶意代码能够分 ...

  10. iOS6 与iOS7以及7以上状态栏的颜色设置

    iOS7默认状态栏文字颜色为黑色 修改为白色的方法:(chenyong注意 我的Status bar style 使用的仍是默认值Gray style(default)) 1在Info.plist中设 ...