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 ...
随机推荐
- 【31.58%】【codeforces 719B】 Anatoly and Cockroaches
time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...
- [Vue] Dynamic Vue.js Components with the component element
You can dynamically switch between components in a template by using the reserved <component> ...
- [React Router v4] Conditionally Render a Route with the Switch Component
We often want to render a Route conditionally within our application. In React Router v4, the Route ...
- Android菜鸟的成长笔记(25)——可爱的小闹钟
摘要: 这一篇主要使用系统为我们提供的一个服务AlarmManager来制作一个Android小闹钟,同时还涉及到了自定义主题.判断第一次启动应用.自定义动画.对话框.制作指导滑动页面等方面.最后形成 ...
- Innodb单表数据物理恢复
本文将介绍使用物理备份恢复Innodb单表数据的方法 前言: 随着innodb的普及,innobackup也成为了主流备份方式.物理备份对于新建slave,全库恢复的需求都能从容应对. 但当面临单表数 ...
- scala 判断对象相等/equals
package scala_enhance.scalaextends import scala.collection.mutable.HashMap /** * scala中判断对象相等 * 原则: ...
- sklearn 特征降维利器 —— PCA & TSNE
同为降维工具,二者的主要区别在于, 所在的包不同(也即机制和原理不同) from sklearn.decomposition import PCA from sklearn.manifold impo ...
- 数据结构 Tricks(一)—— 父节点和左右孩子索引号之间的关系
如果以第 0 个位置开始标记树根节点,则第 i 个结点的左右孩子分别为: 2i+1 2i+2 反之,如果一个结点的标号为 i,则其父节点为: i/2:i 为左孩子结点: i/2-1:i 为右孩子结点: ...
- javascript中window对象 部分操作
<!--引用javascript外部脚本--> <script src="ss.js"></script> <script> //警 ...
- TensorFlow 学习(十一)—— 正则(regularizer)
正则作用的对象是目标函数,如图对均方误差使用 ℓ2 正则: loss = tf.reduce_mean(tf.square(y-y_) + tf.contrib.layers.l2_regulariz ...