JS实时检测文本框内容长度
通过js代码实时监测,文本框内容的变化以及长度,下图是一个实际使用场景。
HTML部分:
- <input id="Text1" type="text" onkeyup="TmaxLength(this)"/>
- <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实时检测文本框内容长度的更多相关文章
- 通过js实时检测文本框内容
思路 1,在获取文本框焦点后,启动定时器,每隔100毫秒来查看文本内容的改变 2,在文本框失去焦点后,清除定时器 下面是一个简单的例子 <!DOCTYPE html> <html&g ...
- js监听文本框内容变化
js监听文本框内容变化 原理很简单,就是在外部先声明一个用来记录input值的变量,然后每0.1秒比较这个值与input的值,如果发生改变,则运行自己的代码,同时改变变量.从而实现对input值改变的 ...
- JS来推断文本框内容改变事件
oninput,onpropertychange,onchange的使用方法 onchange触发事件必须满足两个条件: a)当前对象属性改变,而且是由键盘或鼠标事件激发的(脚本触发无效) b) ...
- JS、JQury - 文本框内容改变事件
例子: 效果: 前端代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="De ...
- js 实时计算文本框字数限制
$.fn.myTarea = function(){ return this.each(function(){ $(this).bind('input propertychange', functio ...
- 同步文本框内容的JS代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js获取子节点和修改input的文本框内容
js获取子节点和修改input的文本框内容 js获取子节点: $("#"+defaultPVItemId).children().eq(3); //获取某个选择器下的第四个子节点 ...
- JS和vue文本框输入改变p标签的内容测试
文本框输入,p标签的内容自动变成文本框的内容,如下是三种方法的测试: 方法1:JS里的onchange,当文本框内容改变事件,该事件里写的方法是,获取p标签本身,然后获取文本框的值,赋值给变量,最后给 ...
- JS事件 文本框内容改变事件(onchange)通过改变文本框的内容来触发onchange事件,同时执行被调用的程序。
文本框内容改变事件(onchange) 通过改变文本框的内容来触发onchange事件,同时执行被调用的程序. 如下代码,当用户将文本框内的文字改变后,弹出对话框"您改变了文本内容!&quo ...
随机推荐
- Kinect 摄像头范围介绍和玩家舒适距离实测
本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接: http://blog.csdn.net/cartzhang/article/details/44588097 作者:ca ...
- Windows7系统下安装OpenSSL攻略
Windows7系统下安装OpenSSL攻略 http://blog.chinaunix.net/uid-20479991-id-216269.html http://my.oschina.net/s ...
- 单个和多个checkbox选中事件怎么写
单个和多个checkbox选中事件怎么写 一.总结 一句话总结: 1.checkbox的事件方法的话主要是change和click 2.checkbox的属性判断的话主要是prop(判断checked ...
- 古语云:工欲善其事必先利其器 --> 最新、最全的 IntelliJ IDEA(2018.3.3) 的介绍、安装、破解、配置与使用
原文:古语云:工欲善其事必先利其器 --> 最新.最全的 IntelliJ IDEA(2018.3.3) 的介绍.安装.破解.配置与使用 一.IntelliJ IDEA 介绍 -> Ecl ...
- scala读写文件 comparing values of types Unit and Int using `!=' will always yield true
由于scala没有对写入文件的支持,所以写文件时通常借助java进行IO操作 //方式一(小文件) /* val s1 = Source.fromFile("D:\\inputword\\h ...
- WPF入门(三)->两个几何图形合并(CombinedGeometry)
原文:WPF入门(三)->两个几何图形合并(CombinedGeometry) 在WPF中,提供了一个CombinedGeometry对象可以使两个几何图形合并产生效果 CombinedGeom ...
- Eclipse 学习总结
一. Eclipse 中一个普通 JavaWeb 项目的目录结构 如果项目工程中没有web.xml文件,可以手动动态添加. 右击项目 -> java EE Tools -> ...
- 类的XML序列化(XML Serialization)
最近做的一个ASP.NET项目中,需要在一个页面中维护一个类的数组,在每次页面刷新的使其前一次的状态保持不变.开始错误的使用了static,导致了致命的共享错误.后来突然想起C#类能够使用XML序列化 ...
- IComparable与排序
IComparable:一种特定于类型的通用比较方法,值类型或类通过实现此方法对特认定进行排序. IComparable的作用是提供了一种比较两个对象的特定类型的方法.这是必需的如果您想要为对象提供任 ...
- jsonkit 分解nsarray 时刻 一个错误
jsonkit 分解nsarray 时刻 一个错误 Assertion failure in -[TXJKArray count], /Users/mqq/hudson/1740/src/Tencen ...