如果你在实现“统计input、textarea文本框输入字数”中遇到问题，阅读本文或许可以帮助你解决这个棘手的问题！

手机页面开发，要统计textareal文本框输入字数，使用onkeyup虽然可以监听到输入框的文本字数变化，但在iphone下有个问题：拼音输入法，在输入汉字拼音还没上屏的状态下， js 的 onkeyup 事件会把拼音的字母个数当成上屏字数统计啦。直接的影响是文本框输入字数统计显示错误！

示例代码：

<style> .ta-wrap{width: 200px;padding: 10px;position: relative;border: 1px solid #000;} .ta-wrap textarea{width: 100%;height: 100%;border: none;outline: none;} .ta-wrap span{position: absolute;right: 10px;bottom: 10px;} </style> <div class="ta-wrap"><textarea cols="30" rows="10" placeholder="输入文字测试"></textarea> 10字</div> <script> $(".ta-wrap textarea").on('keyup', function(event) { console.log(event.type) var val=$(this).val(); var len=val.length; var count=$(this).siblings('span'); if(len==0){count.text("10字");return;} if(len>10){ len=10; $(this).val(val.substring(0,10)); count.text(len+"/10"); </script>

提示：你可以先修改部分代码再运行。

js监听input 、 textarea 等表单输入框内容变化事件：

1 、 oninput事件与onpropertychange事件的区别：

oninput 事件是现代浏览器（ ie8 及以下的 ie 低版本浏览器除外） 的事件， 只 在用户修改输入框内容， value 值 改变时实时触发 或 input状态改变，如:input checkbox checked值被改变时触发 ，但是通过 js 改变 value 时不会触发， 通过 addEventListener() 来注册 事件； onpropertychange 事件是 IE 专有 事件，在 任何属性改变 时 都会触发 ，通过 attachEvent() 来注册 事件。（当输入框设置为 disable=true 后， oninput/onpropertychange都不会触发）

2、onchange 事件与 onpropertychange 事件的区别：

onchange 事件在内容改变且 失去焦点时触发 ； onpropertychange 事件是 实时触发 ，每增加或删除一个字符就会触发，通过 js 改变也会触发该事件，但是该事件是 IE 专有 ！

注意：input checkbox checked值被改变时，现代浏览器input和change事件都会被触发，所以要特别注意所使用终端对这2个事件的是否支持、响应，以确定要使用哪种事件去触发相应的js操作！

3、事件的依次执行先后顺序：

onKeydown onkeypress oninput onpropertychange onkeyup onchange （部分事件，不同浏览器下会不执行，看上面解析）

明白上述事件的本质区别，如果页面上的输入框输入字数统计这一功能要在 pc & 移动端都要正常使用，可以直接把上述示例代码改成：

<style> .ta-wrap{width: 200px;padding: 10px;position: relative;border: 1px solid #000;}<br /> .ta-wrap textarea{width: 100%;height: 100%;border: none;outline: none;}<br /> .ta-wrap span{position: absolute;right: 10px;bottom: 10px;}<br /> </style> <div class="ta-wrap"><textarea cols="30" rows="10" placeholder="输入文字测试"></textarea> 10字</div> <script> $(".ta-wrap textarea").on('keyup input', function(event) { console.log(event.type) var val=$(this).val(); var len=val.length; var count=$(this).siblings('span'); if(len==0){count.text("10字");return;} if(len>10){ len=10; $(this).val(val.substring(0,10)); count.text(len+"/10"); </script>

提示：你可以先修改部分代码再运行。

即把监听 input 、 textarea 等表单输入框内容变化的 oninput 事件加上即可 解决 iphone 输入框字数统计错误 的问题，做到功能全兼容！

参考链接：

iOS 9 - keyup event not firing

On input change event?

GlobalEventHandlers.oninput

input 标签内容改变的触发事件

input 输入框事件监听(一)：keydown、keyup、input

如果你觉得本站文章不错，阅读完有所收获，欢迎捐赠赞助：

远程桌面连接修复工具，推荐微软windows官方工具

解决edge浏览器：正在设置同步，同步功能异常问

支付宝扫码领红包，每天能领，直接当钱用！

edge浏览器快捷键一键切换地址栏搜索引擎

win7这样操作，可成功安装高版本node.js！

windows下按键盘英文字母不能自动选中跳转到此字

win7最后一个官方原版操作系统镜像下载，值得收

禁止应用联网最好用的工具，强烈推荐！！！

禁止microsoft edge自动更新，解决microsoft ed

microsoft edge 登录以访问此站点修改用户名密码

ios横竖屏自适应切换Info.plist配置

禁止2345看图王软件联网

导入iOS证书显示证书不受信任的解决方法

预防接种服务APP闪退，新冠疫苗怎么预约？

纯净实用的PE工具箱_一键U盘装系统工具

解决“qttabbar捕获Win+E灰色,无法勾选”问题

带www与不带www域名之间的区别

给wordpress博客添加“隐藏内容回复可见”功能

win7最后一个官方原版操作系统镜像下载，值得收

WORDPRESS后台发布新文章时HTML标

google广告联盟有100美元啦

CSS3 @font-face详细用法

wordpress强大的相册插件：展示美女Taylor Sw

分享仿ipc异次元的百度分享工具条

谷歌联盟推出匹配内容单元广告

用转账到支付宝代替个人收款主页

想了很久，还是把帅气的头像换了...

友情链接，贵在坚持啊....

dedecms 调用文章简介[field:description /]如何

主机推荐：游子主机，好不好用我说了不算，用过

秒数倒计时，带多个可控参数，原生js写法

仿jq,判断当前浏览器是否为ie,精确到ie6~8

解决edge浏览器：正在设置同步，同步功能异常问

获取图片真实尺寸&&加载到页面的实际显

预防接种服务APP闪退，新冠疫苗怎么预约？

如何安装和使用CorelDraw VBA插件

flash 混合模式滤色 chrome、ie浏览器失效解决方

wordpress报错：fileperms(): stat failed for

无骨机械舞 – 法国21岁Michael Moral达人秀上

PDFMaker无法找到Adobe PDF Printer 的

搭建本地wordpress文章链接都不对-数据库更改

wamp运行错误：Exception Exception in modul

一个脑瘫患儿，站上舞台高歌《向天再借五百年》

cPanel面板登陆出现IP address has changed!

js判断变量是否有被赋值

2023年03月20日 11:43 phpvar说道： edge/chrome浏览器搜索标签页： 浏览器打开几十个标签页时，按搜索标签页快捷键：ctrl+shift+a，输入关键字... 阅读详细>>

2023年02月03日 11:47 phpvar说道： 跨域Jquery ajax请求的Cookie提交解决方案 php header头设置： Access-Control-Allow-Or... 阅读详细>>

2023年01月09日 00:15 phpvar说道： WordPress Fatal error:out of memory Fatal error: Allowed memory size of xxx bytes exhausted (t... 阅读详细>>

2022年03月11日 11:43 phpvar说道： windows10文件夹搜索 没有与搜索条件匹配的项,重建索引方法： https://jingyan.baidu.com/article/2d5afd6... 阅读详细>>

2022年01月05日 10:23 phpvar说道： 解决git拉取提交代码每次需要输入用户名和密码的问题 git config --system --unset credential.helper，在... 阅读详细>>

【查看更多】 提示： 发表说说，请登录