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 相关文章推荐
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
Jan 09 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
jQuery使用ajaxSubmit()提交表单示例
Apr 04 Javascript
jQuery实现流动虚线框的方法
Jan 29 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
Jan 19 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
Sep 11 Javascript
javascript 作用于作用域链的详解
Sep 27 Javascript
Koa2 之文件上传下载的示例代码
Mar 29 Javascript
详解react native页面间传递数据的几种方式
Nov 07 Javascript
Vue内部渲染视图的方法
Sep 02 Javascript
vue 防止页面加载时看到花括号的解决操作
Nov 09 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
给海燕B411配件机起死回生配上件
2021/03/02 无线电
php win下Socket方式发邮件类
2009/08/21 PHP
PHP中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
ThinkPHP与PHPExcel冲突解决方法
2011/08/08 PHP
php 的加密函数 md5,crypt,base64_encode 等使用介绍
2012/04/09 PHP
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
PHP receiveMail实现收邮件功能
2018/04/25 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
2015/06/01 Javascript
JavaScript深度复制(deep clone)的实现方法
2016/02/19 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
轻松理解JavaScript闭包
2017/03/14 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
js中null与空字符串&quot;&quot;的区别讲解
2019/01/17 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
django使用html模板减少代码代码解析
2017/12/12 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
python实现二分查找算法
2020/09/18 Python
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
工作中的自我评价如何写好
2013/10/28 职场文书
2014年小学植树节活动方案
2014/03/02 职场文书
销售求职信范文
2014/05/26 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
新郎婚礼致辞
2015/07/27 职场文书