标签：input overflow textarea log add 超出 ext 文本 amp
在做问答的时候，遇到一个需求，用户的问题需要限制字数，不仅显示计算的超出字数，还需在超出的内容上加一些提醒的效果，例如豆瓣首页的话题输入框，抽时间研究了下，需要考虑下面几个问题：
1、输入框的高度是固定的，如果超出高度需要滚动显示（可上下键移动显示）
2、随时计算输入的字数，并显示在下方
3、根据计算结果将多出的部分加背景显示（textarea里是不可以加背景的 :< ）
4、根据3分析，需要加个hack实现（加个highlight的div），如果超出此div需要根据teatarea的scrollTop添加移动的距离
5、考虑输入的各种内容及粘贴的情况
下面就一步一步来实现这种效果，先贴个图看看效果：
html代码如下：
<div id="container"> <div class="text-wrap"><div class="highlight"></div></div> <textarea autocomplete="false"></textarea> <p class="count">140</p> </div>
因为要考虑到textarea的文字与highlight的代码完全重合，那么定义的样式需要完全相同，且因输入的文字有限制，所以考虑去掉输入框的滚动条：
textarea::-webkit-scrollbar {display:none}
完整的css如下：
#container { position: relative; } .text-wrap { height: 200px; width: 500px; padding: 5px 5px 5px 5px; overflow: hidden; position: absolute; top: 0; left: 0; z-index: 9; } textarea, .highlight { width: 500px; font-family: arial,sans-serif; font-size: 14px; } textarea { min-height: 200px; border: 1px solid #ccc; padding: 5px 5px 5px 5px; position: relative; background: none; resize: none; z-index: 10; } textarea::-webkit-scrollbar {display:none} .highlight { min-height: 200px; white-space: pre-wrap; word-wrap: break-word; color: transparent; } .highlight span { background: #fcc; } .error { color: red; }
除了html、css外，最最重要的就是js了，只有她才可以带来神奇的效果，她是不可替代的唯一，她是实现你与机器之间的纽带，有了她，不困了、不累了、不饿了，O(∩_∩)O~~
既然考虑到每次输入的时候去查字数，那么就涉及到了事件，keyup和input，所以在textarea上添加这两个事件，只有触发这两个事件时才执行下面的一系列操作。
查字：首先计算是否超出字数，这是常见的限定字数输入框，各种微博、评论基本上都用到这个，定义两个变量，考虑会粘贴或输入代码，所以替换了‘<‘ 和 ‘>‘，len等于文字的长度，
如果len大于设定的最大值需要处理两步：
1、显示当前字数为醒目的红色，提醒用户超出字数限定范围
2、给超出的字数加背景
text = $.trim($this.val().replace(/</g, ‘>‘).replace(/>/g, ‘<‘)) len = text.length
全部js代码如下，注释非常清楚的说明了各部分的内容
var MAX = 140, $text = $(‘textarea‘), $highlight = $(‘div.highlight‘); $text.on(‘keyup input‘, function() { var $this = $(this), text = $.trim($this.val().replace(/</g, ‘>‘).replace(/>/g, ‘<‘)), len = text.length, count = Math.floor(MAX-len); if(count < 0) { $(‘p.count‘).addClass(‘error‘) }else{ $(‘p.count‘).removeClass(‘error‘) } // 显示当前字数 $(‘p.count‘).text(count) // 将文字分成两部分，超出的内容用span包起来，css加红色背景样式 $highlight.html(text.slice(0, MAX) + ‘<span>‘ + text.slice(MAX) + ‘</span>‘) // 考虑粘贴时，内容超出，高亮部分需要重置位置 resetMask() }).on(‘scroll‘, function() { // textarea滚动时，重置高亮部分的位置 resetMask() }) // 高亮内容位置随文本框内容的位置重置 function resetMask() { var textScrollTop = $text.scrollTop(); if(textScrollTop > 0) { $highlight.css(‘margin-top‘, -textScrollTop); return } $highlight.css(‘margin-top‘, 0) }
最终效果地址：https://codepen.io/mengyun/pen/eEbryJ
标签：input overflow textarea log add 超出 ext 文本 amp
原文地址：http://www.cnblogs.com/mengyun/p/7459805.html
