我想创建一个textarea,突出显示超出字符限制的文本(如twitter一样).
我的尝试在这里：http://jsfiddle.net/X7d8H/1/
HTML
Highlighter" id="overflowText">
CSS
* {
font-family: sans-serif;
font-size: 10pt;
font-weight: normal;
}
.wrapper {
position: relative;
width: 400px;
height: 100px;
}
.wrapper > * {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
border: 0;
overflow: hidden;
resize: none;
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap; /* Opera below 7 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* IE */
}
.Highlighter {
background-color: #eee;
color: #f0f;
}
.highlight {
background-color: #fd8;
color: #f0f;
}
textarea {
background-color: transparent;
color:#000;
}
JAVASCRIPT
function limitTextSize(e) {
var max = 140
var txt = $("#textarea1").val();
var left = txt.substring(0,max);
var right = txt.substring(max);
var html = left + '
它使用JQuery
它的工作原理除了在Firefox上.要查看错误,请将其粘贴到textarea中：
fjdf hkj hfj hdfkjsd hfllll sdfl sdlflldsf lsdlf flsdlf lsdf lsdf llsdfls dlfs ldflsd f
这暴露了div和textarea之间格式的细微差别(仅在firefox中).我已将“隐藏”文字设为紫色,以便您可以看到自动换行的区别.
我看过这里：How to force Firefox to render textarea padding the same as in a div?
在这里：Wrapping the text the same way in a div as in a textarea
在这里：Firefox textarea sizing bug?
但似乎没有一个适用……
我想尽量让它成为一个令人满意的div,但是让变革事件看起来就像雷区.
这里有人成功完成了吗？
最佳答案
我认为你遇到的问题是Firefox在textarea元素中添加了1.5px的填充.
过去,Firefox在combination with textareas中已经有some issues和paddings,我认为你可能无法摆脱这些额外的1.5px填充.
通过在div.Highlighter上设置一些特定于供应商的前缀CSS属性,我能够解决您的包装问题.这是jsFiddle.
.Highlighter {
background-color: #eee;
color: #f0f;
-moz-Box-sizing: border-Box;
-moz-padding-end: 1.5px;
-moz-padding-start: 1.5px;
}
设置这些属性可确保
>在Firefox中,div上的填充集不会增加div的宽度,并且
>在Firefox中,将在div的右侧和左侧设置1.5px的填充.
更新
经过一段时间使用2px并且偶尔会遇到一些包装不一致的情况后,我决定给它一次1.5px,而现在似乎已经解决了偶尔出现的不一致问题.
