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&安卓）的更多相关文章
- jQuery 写的textarea输入字数限制
//先判断浏览器是不是万恶的IE var bind_name = 'input';//默认事件 if (navigator.userAgent.indexOf(" ...
- 一次react滚动列表的实践---兼容ios安卓
一.背景 近期项目改版,对原有的h5页面进行了重新设计,数据呈现变成了瀑布流.希望新版兼容ios和安卓两端的情况下,无限制的刷新加载数据.大致效果如下: 整个页面分4部分: 顶部导航 步数状态卡片 用 ...
- JS控制文本框textarea输入字数限制的方法
<html> <head runat="server"> <title></title> <script type=" ...
- jquery实现限制textarea输入字数
ie中可用onpropertychange监听改变事件 火狐和谷歌可用oninput监听改变事件 综合: //使系统中class='text-length'的输入框只能输入200字符(主要用于text ...
- JS控制文本框textarea输入字数限制
<html> <head> <title>JS限制Textarea文本域字符个数</title> <meta http-equiv="C ...
- H5和PC实现点击复制当前文字的功能，兼容ios,安卓
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 手机端两端对齐，兼容ios,安卓
.div-title p label{ text-align: justify; width: 18%; display: inline-block; text-align-last: justify ...
- 监听文本框输入开发仿新浪微博限制输入字数的textarea插件
监听文本框输入 Firefox.Chrome.IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入.退 ...
- 实现textarea限制输入字数（包含中文只能输入10个，全ASCII码能够输入20个）
document.getElementById("<%=textBox1.ClientID %>").value 实现textarea限制输入字数(包含中文只能输入10 ...
随机推荐
- JPA-style positional param was not an integral ordinal
参数错误 多为SQL语句问题 例如SQL拼装中的空格,换行时首位应多加空格保持语句效果
- _tkinter.TclError: image "pyimage1" doesn't exist 解决办法
_tkinter.TclError: image "pyimage1" doesn't exist 解决办法 1 def logout(self): 2 login.LoginWi ...
- C#枚举中使用Flags特性
.NET中的枚举我们一般有两种用法,一是表示唯一的元素序列:还有就是用来表示多种复合的状态.这个时候一般需要为枚举加上[Flags]特性标记为位域,这样我们就可以用"或"运算符组合 ...
- 理解WSGI
WSGI是什么? WSGI,全称 Web Server Gateway Interface,或者 Python Web Server Gateway Interface ,是为 Python 语言定义 ...
- .NET跨平台实践：再谈用C#开发Linux守护进程 — 完整篇
Linux守护进程是Linux的后台服务进程,相当于Windows服务,对于为Linux开发服务程序的朋友来说,Linux守护进程相关技术是必不可少的,因为这个技术不仅仅是为了开发守护进程,还可以拓展 ...
- (转)kafka实战教学
转载自:https://www.cnblogs.com/hei12138/p/7805475.html Apache kafka 工作原理介绍-----https://www.ibm.com/deve ...
- (转)linux用户态和内核态理解
原文:https://blog.csdn.net/buptapple/article/details/21454167 Linux探秘之用户态与内核态-----------https://www.cn ...
- Jfinal QuartzPlugin 简单使用案例
之前一直使用spring quartz感觉还挺好用的,就想着jfinal是不是也可以使用quartz插件,于是发现了QuartzPlugin和jfinal-scheduler<参考:https: ...
- 使用Docker发布应用
新建spring boot应用demo-docker,添加web依赖 <dependency> <groupId>org.springframework.boot</gr ...
- PLSQL Developer概念学习系列之如何正确登录连接上Oracle（图文详解）
不多说,直接上干货! 进入PLSQL Developer 1.双击 2.得到 比如,我这里安装的是 全网最详细的Windows系统里Oracle 11g R2 Database服务器端(64bit)的 ...