JavaScript监控输入框字数变化，超出限制则禁止输入
JavaScript监控输入框字数变化，超出则禁止输入
不废话，给你看看效果：
1.无输入状态：
2.输入三个字符：
3.超出5个后报错：
现在粘出代码，首先是html代码：
<body>
<div class="weui-cells__title" style="font: '微软雅黑';font-size: 17px;color: black;" align="center">大文本框：</div>
<div class="weui-cell">
<textarea class="weui-textarea" id="ActivityParticipationProcess" placeholder="在此处输入内容" rows="5" oninput="OnInput (event,5,'count')" onpropertychange="OnPropChanged (event,5,'count')"></textarea>
<div class='weui-textarea-counter'><span id="count"></span>/5</div>
</div>
</body>
上述html代码中，关键在于OnInput方法和OnPropChanged方法，方法内参数event为主要监听参数，2000为字数限制，"count"为下面那个字数统计的id，传入这三个参数可以使方法被多个页面调用，实现代码复用，减少冗余代码。
现在贴出js部分代码，我是写在一个单独的js文件里面的，此处放在同一页面：
<!-- body 最后 -->
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
<script>
$("#count").html("0");//初始化字数计数器 /* 此方法兼容大部分浏览器，如：Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
监听输入框字数变化*/
function OnInput(event, length, id) { if(event.srcElement.value.length <= length) {
$("#" + id).html(event.srcElement.value.length);
} else {
$.toptip("内容过长，最多" + length + "字", 'warning');
/*获取输入框id值*/
var id2 = event.srcElement.id;
/*超出规定长度后禁止继续输入*/
var value = event.srcElement.value.substring(0, length);
$("#" + id2).val(value);
} }
// 此方法仅适用于IE浏览器
function OnPropChanged(event, length, id) { if(event.srcElement.value.length <= length) {
$("#" + id).html(event.srcElement.value.length);
} else {
$.toptip("内容过长，最多" + length + "字", 'warning');
/*获取输入框id值*/
var id2 = event.srcElement.id;
/*超出规定长度后禁止继续输入*/
var value = event.srcElement.value.substring(0, length);
$("#" + id2).val(value);
} }
</script>
现在放出完整页面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>监听输入框字数变化</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<!-- head 中 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
</head> <body>
<div class="weui-cells__title" style="font: '微软雅黑';font-size: 17px;color: black;" align="center">大文本框：</div>
<div class="weui-cell">
<textarea class="weui-textarea" id="ActivityParticipationProcess" placeholder="在此处输入内容" rows="5" oninput="OnInput (event,5,'count')" onpropertychange="OnPropChanged (event,5,'count')"></textarea>
<div class='weui-textarea-counter'><span id="count"></span>/5</div>
</div>
</body>
<!-- body 最后 -->
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
<script>
$("#count").html("0");//初始化字数计数器 /* 此方法兼容大部分浏览器，如：Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
监听输入框字数变化*/
function OnInput(event, length, id) { if(event.srcElement.value.length <= length) {
$("#" + id).html(event.srcElement.value.length);
} else {
$.toptip("内容过长，最多" + length + "字", 'warning');
/*获取输入框id值*/
var id2 = event.srcElement.id;
/*超出规定长度后禁止继续输入*/
var value = event.srcElement.value.substring(0, length);
$("#" + id2).val(value);
} }
// 此方法仅适用于IE浏览器
function OnPropChanged(event, length, id) { if(event.srcElement.value.length <= length) {
$("#" + id).html(event.srcElement.value.length);
} else {
$.toptip("内容过长，最多" + length + "字", 'warning');
/*获取输入框id值*/
var id2 = event.srcElement.id;
/*超出规定长度后禁止继续输入*/
var value = event.srcElement.value.substring(0, length);
$("#" + id2).val(value);
} }
</script> </html>
第一次写，写的不好或者排版不好看请见谅，有疑问或者建议意见都欢迎留言或者来信：CodeKjm@163.com
JavaScript监控输入框字数变化，超出限制则禁止输入的更多相关文章
- JavaScript 实现textarea限制输入字数， 输入框字数实时统计更新，输入框实时字数计算移动端bug解决
textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制 ...
- HTML5 oninput实时监听输入框值变化的完美方案
在网页开发中经常会碰到需要动态监听输入框值变化的情况,如果使用 onkeydown.onkeypress.onkeyup 这个几个键盘事件来监测的话,监听不了右键的复制.剪贴和粘贴这些操作,处理组合快 ...
- 【转载】实时监听输入框值变化的完美方案：oninput & onpropertychange
oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有 ...
- js/jquery 实时监听输入框值变化的完美方案：oninput & onpropertychange
(1) 先说jquery, 使用 jQuery 库的话,只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了,示例代码: $('#username').bin ...
- angularJS使用$watch监控数据模型的变化
使用$watch监控数据模型的变化 在scope 内置的全部函数中,用得最多的可能就是$watch 函数了.当你的数据模型中某一部分发生变化时,$watch 函数能够向你发出通知.你能够监控单个对象的 ...
- .NET Core的文件系统[1]：读取并监控文件的变化
ASP.NET Core 具有很多针对文件读取的应用.比如我们倾向于采用JSON文件来定义配置,所以应用就会涉及针对配置文件读取.如果用户发送一个针对物理文件的HTTP请求,应用会根据指定的路径读取目 ...
- 实时监听输入框值变化：oninput & onpropertychange
结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化. oninput 是 HTML5 的标准事件,对于检测 textarea, i ...
- 实时监听输入框值变化的完美方案：oninput & onpropertychange
实时监听输入框值变化的完美方案:oninput & onpropertychange: 网址:http://www.cnblogs.com/lhb25/archive/2012/11/30/o ...
- js监听input等表单输入框的变化事件oninput
js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...
随机推荐
- 使用vue-router切换页面时，获取上一页url以及当前页面url
今天在实现一个小功能的时候,遇到一个问题,使用vue-router获取上一页面的url信息,我尝试了多种方式,发现使用vue-router的canDeactivate钩子实现这个功能最为方便,现在将我 ...
- oracle学习篇四：多表查询
-----------------产生笛卡儿积------------------------------------ select * from emp,dept; --不带条件时,记录数为14*4 ...
- 如何取消IntelliJ IDEA打开默认项目配置
一.前言 在前端中,个人比较喜欢使用IntelliJ IDEA开发工具!IntelliJ IDEA是非常强大的开发集成工具,打开IntelliJ IDEA软件默认会打开最近一次的 ...
- Learn by pictures on Computer Fields
- SVN学习——简单入门之创建仓库、导入、检出（一）
从刚刚参加工作就开始使用svn,清晰的记得那年师姐比较生气的来找我:“你怎么又不更新就提交代码了,把我写的都给覆盖掉了”,哈哈~ 虽然一直在用svn,不过在日常工作中主要用到的是简单的操作,而且大多数 ...
- js如何完整的显示较长的数字
试试下面一行吧 Math.pow(10, 99).toLocaleString().split(',').join('') toLocaleString([character]) 方法会将其对象转换成 ...
- Linux中如何安装配置Mysql和SVN服务端
目标Linux系统为centOS 一.安装登陆mysql 1.直接以root用户运行:yum install mysql 和yum install mysql-server等带安装完成. 2.安装 ...
- laravel5.4学习笔记
1.安装laravel可以直接用composer安装,然后用laravel new xxx来新建项目 服务器上安装了composer(php包管理工具)以后, composer global requ ...
- Oracle彻底杀掉进程
kill session 是DBA经常碰到的事情之一.如果kill 掉了不该kill 的session,则具有破坏性,因此尽可能的避免这样的错误发生.同时也应当注意,如果kill 的session属于 ...
- March 21 2017 Week 12 Tuesday
Sometimes ever, sometimes never. 相聚有时,后会无期. Maybe love is something we can't touch but we can feel w ...