JS实时检测文本框内容长度

通过js代码实时监测，文本框内容的变化以及长度，下图是一个实际使用场景。

HTML部分：

<input id="Text1" type="text" οnkeyup="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,且会涉及到光标位置的问题，下篇文章会写到光标定位。

转载于:https://www.cnblogs.com/zhoumingjie/p/7911518.html

JS实时检测文本框内容长度相关推荐

[事件处理] js实现的文本框内容发生改变立马触发事件简单介绍
js实现的文本框内容发生改变立马触发事件简单介绍: 本章节介绍一下如何在文本框的内容发生变化的时候,立马触发一个事件执行响应的操作,而不是像是keydow或者keyup事件一样,只能够检测通过键盘输入 ...
JS来推断文本框内容改变事件
oninput,onpropertychange,onchange的使用方法 onchange触发事件必须满足两个条件: a)当前对象属性改变,而且是由键盘或鼠标事件激发的(脚本触发无效) b) ...
js 实时计算文本框字数限制
$.fn.myTarea = function(){ return this.each(function(){ $(this).bind('input propertychange', functio ...
Vue 实时获取文本框内容
效果图: 简单版本: <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
JS清空输入文本框内容
通过JS的DOM对象进行操作 <script>function clear_content(){document.getElementById("username"). ...
Python-OpenCV学习--外接摄像头实时检测文本框
一.Windows7 系统下 Python 3.x版本 , 台式机外接摄像头使用分水岭算法腐蚀膨胀等,识别文本的区域. import numpy as np import cv2 from m ...
html js文本框文字列出,js实现文本框中输入文字页面中div层同步获取文本框内容的方法...
这篇文章主要介绍了js实现文本框中输入文字页面中div层同步获取文本框内容的方法,实例分析了javascript操作dom元素的技巧,需要的朋友可以参考下本文实例讲述了js实现文本框中输入文字页面中 ...
php 修改input内容,JS简单获取并修改input文本框内容的方法示例
这篇文章主要介绍了JS简单获取并修改input文本框内容的方法,结合实例形式分析了JavaScript针对页面元素的获取.赋值等相关操作技巧,需要的朋友可以参考下本文实例讲述了JS简单获取并修改in ...
DOM--操作元素案例：分时显示不同的图片以及问候语；仿淘宝关闭标签案例；隐藏显示文本框内容；仿新浪注册页面中密码长度的判定
分时显示不同的图片以及问候语分析: 根据不同的时间来判断,所以需要获取到系统的时间. 利用分支语言来设置不同的图片需要更换不同的图片,因此需要操作img的元素src 需要一个div来显示不同问候语 ...

JS实时检测文本框内容长度

JS实时检测文本框内容长度相关推荐

最新文章

热门文章