javascript – 除了Firefox之外,Div和textarea的行为相同

我想创建一个textarea,突出显示超出字符限制的文本(如twitter一样).

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,而现在似乎已经解决了偶尔出现的不一致问题.

javascript – 除了Firefox之外,Div和textarea的行为相同 – 该怎么办？

猜你在找的HTML相关文章