如题，换行符在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. html input控件总结

    Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍. 1,type=text 输入类型是text,这是我们见的 ...

  2. [Golang] 从零开始写Socket Server（1）： Socket-Client框架

    版权声明:本文为博主原创文章,未经博主允许不得转载. 第一次跑到互联网公司实习 ..感觉自己进步飞快啊~第一周刚写了个HTTP服务器用于微信公共号的点餐系统~ 第二周就直接开始一边自学Go语言一边写用 ...

  3. talend 连接mysql数据库没有权限

    使用talend连接一个mysql数据库,提示没有权限,最后发现mysql服务器的配置中只监听了127.0.0.1的端口,拒绝非本地的请求.通过将/etc/mysql/my.cnf中的bind_add ...

  4. msf web_delivery模块攻击

    目标机:win7                    ip:192.168.31.136 攻击机:kai liunx                      ip:192.168.31.54 一. ...

  5. 10个Python面试常问的问题

    概述 Python是个非常受欢迎的编程语言,随着近些年机器学习.云计算等技术的发展,Python的职位需求越来越高.下面我收集了10个Python面试官经常问的问题,供大家参考学习. 类继承 有如下的 ...

  6. scikit-learn：6. Strategies to scale computationally: bigger data

    參考:http://scikit-learn.org/stable/modules/scaling_strategies.html 对于examples.features(或者两者)数量非常大的情况, ...

  7. Android-一只手指滑动View，另一只手指按Home键，重新进入后View状态无法更新的问题

    上午测试报了一个bug:说是一只手指拖动虚拟摇杆上的View滑块不松,另一只手指点击Home键将App压后台,重新进入的时候,View滑块卡死了. 刚开始看到这个问题感觉很奇怪,因为正常情况下,手指离 ...

  8. Java map双括号初始化方式的问题

    关于Java双括号的初始化凡是确实很方便,特别是在常量文件中,无可替代.如下所示: Map map = new HashMap() { { put("Name", "Un ...

  9. c++ STL map 结构体

    Map是STL的一个关联容器,它提供一对一(其中第一个可以称为关键字,每个关键字只能在map中出现一次,第二个可能称为该关键字的值)的数据处理能力,由于这个特性,它完成有可能在我们处理一对一数据的时候 ...

  10. (原创)c++11改进我们的程序之垃圾回收

    c#和java中有自动垃圾回收机制,.net运行时和java虚拟机可以管理分配的堆内存,在对象失去引用时自动回收,因此在c#和jva中, 内存管理不是大问题.c++语言没有垃圾回收机制,必须自己去释放 ...