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 相关文章推荐
JS获取dom 对象 ajax操作 读写cookie函数
Nov 18 Javascript
JS延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
Knockoutjs的环境搭建教程
Nov 26 Javascript
使用js实现的简单拖拽效果
Mar 18 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
Oct 30 Javascript
Node.js开发者必须了解的4个JS要点
Feb 21 Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 Javascript
原生JS:Date对象全面解析
Sep 06 Javascript
js运动事件函数详解
Oct 21 Javascript
基于vue实现分页/翻页组件paginator示例
Mar 09 Javascript
小程序server请求微信服务器超时的解决方法
May 21 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 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
Zend引擎的发展 [15]
2006/10/09 PHP
substr()函数中文版
2006/10/09 PHP
PHP 编程请选择正确的文本编辑软件
2006/12/21 PHP
PHPMailer邮件发送的实现代码
2013/05/04 PHP
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
php的socket编程详解
2016/11/20 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
Javascript实现前端简单的路由实例
2016/09/11 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
Angular2库初探
2017/03/01 Javascript
基于jstree使用AJAX请求获取数据形成树
2017/08/29 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
[54:57]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第二场 1月8日
2021/03/11 DOTA
Python函数参数类型*、**的区别
2015/04/11 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
python搜索包的路径的实现方法
2019/07/19 Python
Django框架自定义模型管理器与元选项用法分析
2019/07/22 Python
python matplotlib库直方图绘制详解
2019/08/10 Python
opencv转换颜色空间更改图片背景
2019/08/20 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
python3跳出一个循环的实例操作
2020/08/18 Python
上海中网科技笔试题
2012/02/19 面试题
女大学生个人求职信
2013/12/09 职场文书
社团文化节邀请函
2014/01/10 职场文书
主要负责人任命书
2014/06/06 职场文书
党员批评与自我批评范文
2014/09/23 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
学校三八妇女节活动总结
2015/02/06 职场文书
写作指导:怎么书写竞聘演讲稿?
2019/07/04 职场文书
导游词之湖北武当山
2019/09/23 职场文书