最近在做一个微信公众号的页面，其中有对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&安卓）的更多相关文章

  1. jQuery 写的textarea输入字数限制

    //先判断浏览器是不是万恶的IE        var bind_name = 'input';//默认事件        if (navigator.userAgent.indexOf(" ...

  2. 一次react滚动列表的实践---兼容ios安卓

    一.背景 近期项目改版,对原有的h5页面进行了重新设计,数据呈现变成了瀑布流.希望新版兼容ios和安卓两端的情况下,无限制的刷新加载数据.大致效果如下: 整个页面分4部分: 顶部导航 步数状态卡片 用 ...

  3. JS控制文本框textarea输入字数限制的方法

    <html> <head runat="server"> <title></title> <script type=" ...

  4. jquery实现限制textarea输入字数

    ie中可用onpropertychange监听改变事件 火狐和谷歌可用oninput监听改变事件 综合: //使系统中class='text-length'的输入框只能输入200字符(主要用于text ...

  5. JS控制文本框textarea输入字数限制

    <html> <head> <title>JS限制Textarea文本域字符个数</title> <meta http-equiv="C ...

  6. H5和PC实现点击复制当前文字的功能，兼容ios,安卓

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 手机端两端对齐，兼容ios,安卓

    .div-title p label{ text-align: justify; width: 18%; display: inline-block; text-align-last: justify ...

  8. 监听文本框输入开发仿新浪微博限制输入字数的textarea插件

    监听文本框输入 Firefox.Chrome.IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入.退 ...

  9. 实现textarea限制输入字数（包含中文只能输入10个，全ASCII码能够输入20个）

    document.getElementById("<%=textBox1.ClientID %>").value 实现textarea限制输入字数(包含中文只能输入10 ...

随机推荐

  1. 锐捷客户端下虚拟机VMware无法联网的问题

    打开VMware,选择右下角的网络适配器,设置为NAT模式. 如果还不能上网,则打开电脑的任务管理器,保证VMwate的服务保持开启. 但是锐捷客户端,会自动检测并且关闭VMware NAT Serv ...

  2. odoo开发笔记 -- 安装Backend debranding去除odoo信息模块后 隐藏开发者模式

    Backend debranding 找到如下文件,将相关灰色代码注释掉. <?xml version="1.0" encoding="UTF-8"?&g ...

  3. Ruby：Mechanize的使用教程

    小技巧 puts Mechanize::AGENT_ALIASES 可以打印出所有可用的user_agent puts Mechanize.instance_methods(false) 输出Mech ...

  4. C# 算法系列一基本数据结构

    一.简介 作为一个程序员,算法是一个永远都绕不过去的话题,虽然在大学里参加过ACM的比赛,没记错的话,浙江赛区倒数第二,后来不知怎么的,就不在Care他了,但是现在后悔了,非常的后悔!!!如果当时好好 ...

  5. 详解C#泛型（三）

    一.前面两篇文章分别介绍了定义泛型类型.泛型委托.泛型接口以及声明泛型方法: 详解C#泛型(一) 详解C#泛型(二) 首先回顾下如何构建泛型类: public class MyClass<T&g ...

  6. curl 详解【转】

    原文:https://blog.csdn.net/lansesl2008/article/details/14523303 用途说明 curl命令是一个功能强大的网络工具,它能够通过http.ftp等 ...

  7. mysqldump主要参数探究

    在数据库的日常维护中,对于数据量小的备份,我们常常采用的是逻辑备份,也就是使用mysqldump导出.数据量比较大的备份会使用percona的xtrabackup,关于xtrabackup工具的使用以 ...

  8. 命令行下更好显示 postgresql 的查询结果

    之前在用 mysql 的时候发现,当列数特别多的时候,在 linux 命令行下,显示不太友好, 然后可以通过将 sql 末尾的 “:” 改为 “\G” 来处理,详情看 命令行下更好显示 mysql 查 ...

  9. postgresql 创建用户并创建数据库

    首先通过 sudo -i -u postgres 以管理员身份 postgres 登陆,然后通过 createuser --interactive (-- interactive 是交互式,创建过程可 ...

  10. js的继承方式分别适合哪些应用场景？

    一.原型链 利用 Person.prototype = new Animal("Human") 实现继承: static式继承.能继承Animal.prototype.不可多重继承 ...