如题,换行符在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 控制输入文字个数(换行不算)的更多相关文章

  1. js对输入文字个数的限制...

    发表留言或者微博的时候,对输入文字个数的限制,下面分两种情况,每种分别介绍两种实现方式: 第一种:一个汉字算一位,两个字母或符号算一位. 通过ASCII编码来判断 textarea.onkeyup = ...

  2. js 控制输入文字的字数

    直接上代码. <html> <head> </head> <body> <textarea id='txtArea' cols='50' rows ...

  3. js判断输入字符串长度(汉字算两个字符,字母数字算一个)

    js判断输入字符串长度(汉字算两个字符,字母数字算一个) 文本输入时,由于数据库表字段长度限制会导致提交失败,因此想到了此方法验证. 废话不多说上代码: <html> <head&g ...

  4. 禁止表单操作及JS控制输入的方式

    <div>表单元素特殊属性<input type="text" value="禁止输入" disabled /></div> ...

  5. js实现文本框输入文字个数限制代码

    html: <div class="curr_eval_box">                <input type="hidden" n ...

  6. js控制html文字提示语的出现和隐藏

    有时我们需要在点击html输入框的时候,旁边会出现提示语.在输入字符的时候,输入框下边会出现输入了多少字符的提示. 请看下面实例. <!DOCTYPE html> <html> ...

  7. js统计输入文字的字节数(byte)

    这里主要考虑的是日文,日文中包含了半角和全角文字,半角算1,全角算2. <html> <head> <script language="javascript&q ...

  8. jquery判断输入文字个数的统计代码

    1.js代码部分 <script type="text/javascript">             $(function() { function albumNa ...

  9. js 控制选中文字

     //脚本获取网页中选中文字 var word = document.selection.createRange().text;  //获取选中文字所在的句子 var range =  documen ...

随机推荐

  1. 使用 MD5 加密 去重对插入的影响

    现在有3000条数据,需要插入到数据库中去,使用的是对链接进行MD5加密, hashcode = md5(str(item_url))然后在数据库中设置 hashcode 为UNIQUE索引 3000 ...

  2. 正则和xpath在网页中匹配字段的效率比较

    1. 测试页面是  https://www.hao123.com/,这个是百度的导航 2. 为了避免网络请求带来的差异,我们把网页下载下来,命名为html,不粘贴其代码. 3.测试办法: 我们在页面中 ...

  3. MySQL自成一派的查询提示

    [查询提示] MySQL中可以给select语句各种提示,比如告诉它“查询的结果集特别大,请直接用磁盘临时表”,“请让这条select优先执行” .... [查询提示:与结果集相关] 与结果集相关的查 ...

  4. 使用 Swagger 文档化和定义 RESTful API

    大部分 Web 应用程序都支持 RESTful API,但不同于 SOAP API——REST API 依赖于 HTTP 方法,缺少与 Web 服务描述语言(Web Services Descript ...

  5. iOS 在object-c 中调用c文件 方法

    1,新建c 头文件  lib.h 定义 c 函数 2,新建 c 实现文件,新建模板选中 c File  lib.c 3,oc 中调用,引用 c 头文件 lib.h ok .搞定

  6. 源码解析-EventBus

    示例使用 时序图 源码解读 EventBus 使用 官网定义:EventBus 是一个使用 Java 写的观察者模式,解耦的 Android 开源库.EventBus 只需要几行代码即可解耦简化代码, ...

  7. PreviewRenderUtility的Example

    用PreviewRenderUtility就不用自己再去创建摄像机来做模型在Editor下的预览了 需要注意,默认是用场景天空盒和场景灯光.参考ShaderForge编辑器的做法,配置自定义灯光 这些 ...

  8. ZOJ Problem Set - 1004-Anagrams by Stack

     唉!先直接上源码吧!什么时候有时间的再来加说明. #include<iostream> #include<vector> #include<stack> #i ...

  9. Fluent UDF【2】:学习途径

    要怎样做才能做到无畏惧编写任何UDF程序?估计很多与UDF打交道的人都会问到这个问题. 面对UDF文档中那众多的宏描述,小伙伴们是不是感觉到茫然无措,不知从何入手.有时候读别人写好的程序感觉并不难,然 ...

  10. Dynamic Control Flow in ML

    https://arxiv.org/abs/1805.01772 https://www.leiphone.com/news/201702/cb7cPOtzFj1pgRpk.html