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 相关文章推荐
jquery实现居中弹出层代码
Aug 25 Javascript
javascript中&quot;/&quot;运算符常见错误
Oct 13 Javascript
jQuery控制图片的hover效果(smartRollover.js)
Mar 18 Javascript
javascript学习笔记(八) js内置对象
Jun 19 Javascript
jquery使用remove()方法删除指定class子元素
Mar 26 Javascript
express文件上传中间件Multer详解
Oct 24 Javascript
Vue2.0 UI框架ElementUI使用方法详解
Apr 14 Javascript
js字符串倒序的实例代码
Nov 30 Javascript
小程序分页实践之编写可复用分页组件
Jul 18 Javascript
js实现课堂随机点名系统
Nov 21 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
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
php 过滤危险html代码
2009/06/29 PHP
Notice: Trying to get property of non-object problem(PHP)解决办法
2012/03/11 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
2009/03/21 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
javascript文件中引用依赖的js文件的方法
2014/03/17 Javascript
NodeJS制作爬虫全过程(续)
2014/12/22 NodeJs
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
2016/10/11 Javascript
jQuery实现三级联动效果
2017/03/02 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
2017/08/08 jQuery
动手写一个angular版本的Message组件的方法
2017/12/16 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
vue实现打地鼠小游戏
2020/08/21 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
python 中的list和array的不同之处及转换问题
2018/03/13 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
python学生管理系统
2019/01/30 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
python 将dicom图片转换成jpg图片的实例
2020/01/13 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
Python之字典对象的几种创建方法
2020/09/30 Python
深入解析HTML5 Canvas控制图形矩阵变换的方法
2016/03/24 HTML / CSS
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
保险专业大专生求职信
2013/10/26 职场文书
高一自我鉴定
2013/12/17 职场文书
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS