通过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. PHP如何实现数据类型转换(字符转数字,数字转字符)(三种方式)

    PHP如何实现数据类型转换(字符转数字,数字转字符)(三种方式) 一.总结 一句话总结: 1.强制转换:(int) (bool) (float) (string) (array) (object) 2 ...

  2. python3 numpy基本用法归纳总结

    安装numpy : pip install numpy numpy数组生成方法总结 In [4]: import numpy as np #使用列表生成一个一维数组 data = [1,2,3,4,5 ...

  3. 详细回复某个CSDN网友,对我的文章和技术实力以及CSDN的吐槽

    貌似被大学生鄙视了,我也是醉了,现在的大学生水平和信心,都这么高了~ 看来,我得加把劲了~ o(︶︿︶)o 电子商务系列文章,是我闲来无事,分享自己的一些业余实践经验的文章.其中关于数据库设计的这一篇 ...

  4. java及jdbc与sql之间日期的转换

    javaSE中主要为日期字符串和日期对象之间的转换 JDBC中主要是util中Date与sql中作为数据库中Date的转换 public class DateDemo { public static ...

  5. 【matlab】GPU 显卡版本与计算能力(compute capability)兼容性问题

    MathWorks - Bug Reports 1. 问题说明 当运行 alexnet 等卷积神经网络需要使用 GPU 加速时,matlab 如果提示如下的警告信息: GPUs of compute ...

  6. WatchDog工作原理

    Android系统中,有硬件WatchDog用于定时检测关键硬件是否正常工作,类似地,在framework层有一个软件WatchDog用于定期检测关键系统服务是否发生死锁事件. watchdog的源码 ...

  7. BZOJ 3524 - 主席树

    传送门 题目分析 标准主席树,按照位置插入每个数,对于询问l, r, 在l-1,r两树上按照线段树搜索次数大于(r - l + 1) / 2的数. code #include<bits/stdc ...

  8. spark action之saveastextfile

    java /** *saveastextfile 把rdd中的数据保存到文件中,只能指定文件夹 *@author Tele * */ public class SaveasTextFileDemo1 ...

  9. DAX的圈圈大坑:循环依赖关系错误circular dependency (单表篇)

    使用DAX中的某些函数特别类似Calculate这种函数创建计算列时很容易出现一种错误,叫做检测到循环依赖关系,即:A circular dependency was detected.对于刚接触Da ...

  10. Android的PVPlayer介绍

    1 Player的组成 OpenCore的Player的编译文件是pvplayer/Android.mk,将生成动态库文件 libopencoreplayer.so.这个库包括了双方面的内容:一方是P ...