Textarea输入字数限制实例(兼容iOS&安卓)


Posted in Javascript onJuly 06, 2017

最近在做一个微信公众号的页面,其中有对textarea做输入字数限制,而且需要兼容iOS和安卓手机,

下面直接贴代码:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>textarea输入字数限制(兼容ios和安卓)</title>
</head>

<body>
  <!-- 最多输入10个字 -->
  <textarea placeholder="请输入家庭地址(必填)" rows="2"></textarea>
  <textarea placeholder="请输入家庭地址(必填)" rows="2"></textarea>
  <textarea placeholder="请输入家庭地址(必填)" rows="2"></textarea>
  <textarea placeholder="请输入家庭地址(必填)" rows="2"></textarea>
  <textarea placeholder="请输入家庭地址(必填)" rows="2"></textarea>
  <textarea placeholder="请输入家庭地址(必填)" rows="2"></textarea>
  <script>
  var textarea = document.getElementsByTagName('textarea');
  for (var i = 0; i < textarea.length; i++) {
    textarea[i].oninput = function() {//注意,这里要用oninput,不要用onkeyup,否则iOS系统不支持
      this.value = this.value.substring(0, 10);
    }
  }
  </script>
</body>

</html>

遇到的坑:刚开始用onkeyup,发现iOS系统不支持,改用oninput,测试OK。

以上这篇Textarea输入字数限制实例(兼容iOS&安卓)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 异步调用框架 (Part 3 - 代码实现)
Aug 04 Javascript
javascript 程序库的比较(一)之DOM功能
Apr 07 Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
Sep 01 Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 Javascript
JS实现的网页倒计时数字时钟效果
Mar 02 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
Oct 26 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
vuex与组件联合使用的方法
May 10 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 19 Javascript
react系列从零开始_简单谈谈react
Jul 06 #Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 #Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 #Javascript
Js自定义多选框效果的实例代码
Jul 05 #Javascript
使用 jQuery 实现表单验证功能
Jul 05 #jQuery
详解angularJS自定义指令间的相互交互
Jul 05 #Javascript
利用canvas实现的加载动画效果实例代码
Jul 05 #Javascript
You might like
安健A254立体声随身听的分析与打磨
2021/03/02 无线电
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
浅谈discuz密码加密的方式
2014/05/22 PHP
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
IE8 浏览器Cookie的处理
2009/01/31 Javascript
IE6,IE7下js动态加载图片不显示错误
2010/07/17 Javascript
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
JS 对象属性相关(检查属性、枚举属性等)
2015/04/05 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
基于canvas粒子系统的构建详解
2017/08/31 Javascript
利用JavaScript的%做隔行换色的实例
2017/11/25 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
[01:31]完美与DOTA2历程
2014/07/31 DOTA
Django 用户认证组件使用详解
2019/07/23 Python
通过Python编写一个简单登录功能过程解析
2019/09/04 Python
python修改文件内容的3种方法详解
2019/11/15 Python
python 解决selenium 中的 .clear()方法失效问题
2020/09/01 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
Intimissimi德国网上商店:意大利知名内衣品牌
2018/04/03 全球购物
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
经理管理专业毕业自荐书范文
2014/02/12 职场文书
浪费资源的建议书
2014/03/12 职场文书
经典洗发水广告词
2014/03/13 职场文书
安全生产月标语
2014/10/07 职场文书
给上级领导的感谢信
2015/01/22 职场文书
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫