最近在做一个微信公众号的页面，其中有对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. 二分查找的实现（java版本）

    一.二分法查找的定义 依次将所查找数据与中心数据对比,根据大小调整数据边界二.二分查找的条件 数组必须排序三.二分查找的原理 四.二分法查找的代码 /* * 从数组当中找到4所在的索引: * {2,4 ...

  2. Kafka连接SparkStreaming的两种方式

    第一种方式代码: import org.apache.spark.storage.StorageLevel import org.apache.spark.{HashPartitioner, Spar ...

  3. Form表单中不同的按钮进行不同的跳转

    本文参考:http://my.oschina.net/sallency/blog/300568 在开发工作共我们往往会遇到一个表单需要包含多个action不同的提交动作,这时候就不能在使用submit ...

  4. 编写一个c++工程

    c++接触的很少,之前也只是会编写一个简单的cpp文件,但一个工程的实现,往往不仅包括源文件(.cpp后缀文件)一般还有头文件(.h后缀文件)等.一个c++工程中只能有一个main函数,这个函数所在的 ...

  5. C# 多线程学习系列三之CLR线程池系列之ThreadPool

    一.CLR线程池 1.进程和CLR的关系一个进程可以只包含一个CLR,也可以包含多个CLR2.CLR和AppDomain的关系一个CLR可以包含多个AppDomain3.CLR和线程池的关系一个CLR ...

  6. Json.Net 在.Net Core 2.0 中序列化DataSet 问题

    使用Asp.Net Core中自带的版本10.0.1 生成一个简单的DataSet DataSet ds2 = new DataSet(); DataTable table = new DataTab ...

  7. 全网最详细的Windows系统里PLSQL Developer 32bit的下载与安装过程（图文详解）

    不多说,直接上干货! 注意的是: 本地若没有安装Oracle服务端,Oracle server服务端32位,是远程连接,因此本地配置PLSQL Developer32位. PLSQL Develope ...

  8. 如何在Notepad++里正确设置java环境（图文环境）

    不多说,直接上干货! 这款软件非常好用!!! Notepad++软件的下载与安装步骤(图文详解) 欢迎大家,加入我的微信公众号:大数据躺过的坑        人工智能躺过的坑       同时,大家可 ...

  9. java Queue的用法

    https://www.cnblogs.com/caozengling/p/5307992.html https://blog.csdn.net/a724888/article/details/802 ...

  10. C/C++求职宝典21个重点笔记（常考笔试面试点）

    这是我之前准备找工作时看<C/C++求职宝典>一书做的笔记,都是一些笔试面试中常考的重点难点问题,但比较基础,适合初学者看. 1. char c = '\72'; 中的\72代表一个字符, ...