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

 更新时间:2017年07月06日 08:02:30   转载 投稿:jingxian  
下面小编就为大家带来一篇Textarea输入字数限制实例(兼容iOS&安卓)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

最近在做一个微信公众号的页面,其中有对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 高阶函数使用介绍

    这篇文章主要介绍了Javascript 高阶函数使用介绍,需要的朋友可以参考下
    2015-06-06
  • 快速解决select2在bootstrap模态框中下拉框隐藏的问题

    快速解决select2在bootstrap模态框中下拉框隐藏的问题

    今天小编就为大家分享一篇快速解决select2在bootstrap模态框中下拉框隐藏的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Javascript模仿淘宝信用评价实例(附源码)

    Javascript模仿淘宝信用评价实例(附源码)

    这篇文章主要介绍了Javascript模仿淘宝信用评价功能实现方法,以完整实例形式分析了JavaScript响应鼠标事件动态改变页面元素的相关技巧,并附带了完整的实例代码供读者下载参考,需要的朋友可以参考下
    2015-11-11
  • Javascript BOM学习小结(六)

    Javascript BOM学习小结(六)

    BOM:BrowserObjectModel,浏览器对象模型,提供JS中对浏览器的各种操作的对象,是JS应用中唯一没有相关标准的部分,这事BOM经常出现问题的所在,主要用于处理浏览器窗口与框架,浏览器特有的JS扩展也被默认为BOM的一部分,而各浏览器之间的公有对象就成了默认的标准
    2015-11-11
  • 全面解析Bootstrap中form、navbar的使用方法

    全面解析Bootstrap中form、navbar的使用方法

    这篇文章主要为大家详细解析了Bootstrap中form、navbar的使用方法,感兴趣的朋友可以参考一下
    2016-05-05
  • 详解小程序rich-text对富文本支持方案

    详解小程序rich-text对富文本支持方案

    目前小程序使用比较多的富文本方案一个是小程序自带的rich-text组件,一个是wxPrase,本篇文章主要介绍了详解小程序rich-text对富文本支持方案,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • 简单js代码实现selece二级联动(推荐)

    简单js代码实现selece二级联动(推荐)

    这篇文章主要介绍了简单js代码实现selece二级联动的简单实例。需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • javascript 深拷贝

    javascript 深拷贝

    突然问起我以前的函数,我也会愣一下,心想,真烂!我总是喜欢把最好的东西分享给大家的,以前的大家忘掉吧。
    2010-03-03
  • Js判断参数(String,Array,Object)是否为undefined或者值为空

    Js判断参数(String,Array,Object)是否为undefined或者值为空

    在一些前端控件要提交数据到服务器端的数据验证过程中,需要判断提交的数据是否为空。如果是普通表单的字符串数据,只需要在 trim 后判断 length 即可,而这里需要的数据可以是各种不同的类型,通过 JSON.stringify(data) 进行序列化后再传递
    2013-11-11
  • SpringMVC+bootstrap table实例详解

    SpringMVC+bootstrap table实例详解

    本文通过实例给大家介绍了SpringMVC+bootstrap-table,需要的朋友可以参考下
    2017-06-06

最新评论