js 控制输入文字个数(换行不算)
如题,换行符在textarea中是要当成一个字符的。用普通的maxlength属性就不行了,于是想到通过事件来控制输入文字的长度。
注意哦,回车换行不能算成字符。这样的话,普通的substring等方法可能都不适用,要考虑文字中的换行符。
目前的实现如下,还有不完美的地方。如drag事件没有考虑。
<html>
<head>
</head>
<body>
<p>
textArea2
</p>
<textarea id='txtArea2' data-maxlength=10 cols='50' rows='10'></textarea>
<script> var txtArea2 = document.getElementById("txtArea2");
txtArea2.onkeydown = function(e) {
var maxlength = this.getAttribute("data-maxlength"); var selectionText = this.value.substring(this.selectionStart, this.selectionEnd);
var selectionCnt = getLength(selectionText); if (getLength(this.value) - selectionCnt >= maxlength) {
// 退格键,回车键,删除键,上下左右键
if (! (e.keyCode == 8 || e.keyCode == 13 || e.keyCode == 46 || (e.keyCode >= 37 && e.keyCode <= 40))) {
e.preventDefault();
}
} } txtArea2.oninput = function() {
// 只要有输入,就会触发,包括日语输入法,这个事件不能去
var txtArea = this;
var maxlength = txtArea.getAttribute("data-maxlength");
txtArea.value = txtArea.value.substr(0, maxlength);
} txtArea2.onpaste = function(e) {
// 粘贴事件,只对应chorme。IE的话用window.clipboardData
var clipboardData = e.clipboardData;
var data = clipboardData.getData('Text');
if (data != '') {
var part1 = this.value.substring(0, this.selectionStart);
var part2 = this.value.substring(this.selectionStart, this.selectionEnd);
var part3 = this.value.substring(this.selectionEnd); var maxlength = this.getAttribute("data-maxlength"); var allowlength = maxlength - getLength(part1) - getLength(part3);
var pasteData = data.substr(0, allowlength);
var newStr = part1 + pasteData + part3;
this.value = newStr;
this.selectionStart = this.selectionEnd = part1.length + pasteData.length;
console.log(newStr);
e.preventDefault();
}
} // 字符统计函数(回车换行算字符)
function getLength(input) {
input = input || '';
input = input.replace(/\n/g, '');
return input.length;
}
</script>
</body> </html>
上面的只是测试用的,没有包装成通用方法。不过效果已经实现了。
在此记录一下,有空再来完善一下。
测试环境:chorme。
IE未测试。
js 控制输入文字个数(换行不算)的更多相关文章
- js对输入文字个数的限制...
发表留言或者微博的时候,对输入文字个数的限制,下面分两种情况,每种分别介绍两种实现方式: 第一种:一个汉字算一位,两个字母或符号算一位. 通过ASCII编码来判断 textarea.onkeyup = ...
- js 控制输入文字的字数
直接上代码. <html> <head> </head> <body> <textarea id='txtArea' cols='50' rows ...
- js判断输入字符串长度(汉字算两个字符,字母数字算一个)
js判断输入字符串长度(汉字算两个字符,字母数字算一个) 文本输入时,由于数据库表字段长度限制会导致提交失败,因此想到了此方法验证. 废话不多说上代码: <html> <head&g ...
- 禁止表单操作及JS控制输入的方式
<div>表单元素特殊属性<input type="text" value="禁止输入" disabled /></div> ...
- js实现文本框输入文字个数限制代码
html: <div class="curr_eval_box"> <input type="hidden" n ...
- js控制html文字提示语的出现和隐藏
有时我们需要在点击html输入框的时候,旁边会出现提示语.在输入字符的时候,输入框下边会出现输入了多少字符的提示. 请看下面实例. <!DOCTYPE html> <html> ...
- js统计输入文字的字节数(byte)
这里主要考虑的是日文,日文中包含了半角和全角文字,半角算1,全角算2. <html> <head> <script language="javascript&q ...
- jquery判断输入文字个数的统计代码
1.js代码部分 <script type="text/javascript"> $(function() { function albumNa ...
- js 控制选中文字
//脚本获取网页中选中文字 var word = document.selection.createRange().text; //获取选中文字所在的句子 var range = documen ...
随机推荐
- ASP.NET项目在IIS上使用虚拟目录
在IIS中,应用程序与虚拟目录特别容易混淆,但两者又是完全不同的概念. 应用程序是一个逻辑边界,这个边界可以分隔网站及其组成部分.虚拟目录则是一个真实的指针,这个指针指向了一个本地或远程的物理路径.虚 ...
- Android Studio中如何设置颜色拾色器工具
Android Studio如何设置颜色拾色器工具Color Picker? 你可能下载过一些获取颜色值的一些小工具, 这种方式获取颜色,需要先切换窗口转跳到桌面,然后打开拾色器小工具程序,然后去拾取 ...
- 《Deep Learning》(深度学习)中文版 开发下载
<Deep Learning>(深度学习)中文版开放下载 <Deep Learning>(深度学习)是一本皆在帮助学生和从业人员进入机器学习领域的教科书,以开源的形式免费在 ...
- 安装windows后grub修复
安装windows之后发现ubuntu进不去了,主要原因在于grub被windows干掉了. 原本希望通过使用u盘来进行修复,结果U盘不被识别. 于是通过easybcd启动ubunt live光盘.进 ...
- 逆向project实战--Acid burn
0x00 序言 这是第二次破解 crackme 小程序,感觉明显比第一次熟练.破解过程非常顺利,差点儿是分分钟就能够找到正确的 serial,可是我们的目标是破解计算过程.以下将具体介绍. 0x01 ...
- [CoreOS 转载]CoreOS实践指南(二):架设CoreOS集群
转载:http://www.csdn.net/article/2015-01-04/2823399 摘要:CoreOS是一个采用了高度精简的系统内核及外围定制的操作系统.ThoughtWorks的软件 ...
- 关于go1.6使用vendor的坑
基本命令是:$ govendor init$ govendor add +external 坑:如果在govendor之前,修改过go get的包源代码,那么必须在该包目录里git commit这个修 ...
- Linux--多网卡的7种Bond模式【转】
转自:http://www.cnblogs.com/lcword/p/5914089.html 网卡bond是通过把多张网卡绑定为一个逻辑网卡,实现本地网卡的冗余,带宽扩容和负载均衡.在应用部署中是一 ...
- VS2015打开项目慢、死机和卡顿解决方案
VS2015功能强大,但是经常慢 网上有解决方案如下几个,留着备用: 1.选项-环境-基于客户端性能自动调整视觉体验,去掉选项. 2.选项-源代码管理-插件选无. 3.选项-文本编辑器-所有语言-滚动 ...
- JS中的history对象
window.history指向History对象,它表示当前窗口的浏览历史. History对象保存了当前窗口访问过的所有页面网址. history.back()//后退到前一个网址 等同于 his ...