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 相关文章推荐
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 Javascript
jquery 单引号和双引号的区别及使用注意
Jul 31 Javascript
js动态调用css属性的小规律及实例说明
Dec 28 Javascript
在AngularJS应用中实现一些动画效果的代码
Jun 18 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
js实现炫酷的左右轮播图
Jan 18 Javascript
canvas绘制七巧板
Feb 03 Javascript
Bootstrap导航条学习使用(一)
Feb 08 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
Nov 05 Javascript
在vscode 中设置 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
PHP通过COM使用ADODB的简单例子
2006/12/31 PHP
php 无法载入mysql扩展
2010/03/12 PHP
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
PHP实现递归目录的5种方法
2016/10/27 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
JSON.parse 解析字符串出错的解决方法
2010/07/08 Javascript
jquery easyui滚动条部分设置介绍
2013/09/12 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
angular指令笔记ng-options的使用方法
2017/09/18 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
js实现移动端轮播图
2020/12/21 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
Js数组扁平化实现方法代码总汇
2020/11/11 Javascript
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
PYTHON压平嵌套列表的简单实现
2016/06/08 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
浅谈python 类方法/静态方法
2020/09/18 Python
django使用多个数据库的方法实例
2021/03/04 Python
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
Farfetch台湾官网:奢侈品牌时尚购物平台
2019/06/17 全球购物
Yummie官方网站:塑身衣和衣柜必需品
2019/10/29 全球购物
高二历史教学反思
2014/01/25 职场文书
死亡证明书样本说明
2014/10/18 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书
Python基础 括号()[]{}的详解
2021/11/07 Python