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 ...
随机推荐
- [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 ...
- FullPage.js全屏滚动插件解说
1.主要功能 1).支持鼠标滚动 2).多个回调函数 3).支持手机.平板触屏事件 4).支持css3动画 5).支持窗口缩放 6).窗口缩放时自动调整 7).可设置滚动宽度.背景颜色.滚动速度.循环 ...
- [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 ...
- [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’ ...
- [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 ...
- 无法写入预编译头文件,由于 IO 设备错误,无法运行此项请求的错误的解决
作者:朱金灿 来源:http://blog.csdn.net/clever101 早上查看服务器每日构建的情况,发现出现一个诡异的错误: fatal error C1085: 无法写入预编译头文件:& ...
- linux系统下信号具体解释2
信号是UNIX 系统所使用的进程通信方法中,最古老的一种.信号不但能从内核发往一个进程,也能从一个进程发往还有一个进程.比如,用户在后台启动了一个要运行较长时间的程序,假设想中断其运行,能够用kill ...
- 利用WPF建立自己的3d gis软件(非axhost方式)(一)
原文:利用WPF建立自己的3d gis软件(非axhost方式)(一) 先下载SDK:https://pan.baidu.com/s/1M9kBS6ouUwLfrt0zV0bPew 密码:1te1 地 ...
- 什么是“恶意代码”——————【Badboy】
恶意代码是一种程序,它通过把代码在不被察觉的情况下镶嵌到还有一段程序中,从而达到破坏被感染电脑数据.执行具有入侵性或破坏性的程序.破坏被感染电脑数据的安全性和完整性的目的. 按传播方式,恶意代码能够分 ...
- iOS6 与iOS7以及7以上状态栏的颜色设置
iOS7默认状态栏文字颜色为黑色 修改为白色的方法:(chenyong注意 我的Status bar style 使用的仍是默认值Gray style(default)) 1在Info.plist中设 ...