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

前端之家收集整理的这篇文章主要介绍了javascript – 除了Firefox之外,Div和textarea的行为相同 – 该怎么办?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我想创建一个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 issuespaddings,我认为你可能无法摆脱这些额外的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,而现在似乎已经解决了偶尔出现的不一致问题.

原文链接:https://www.f2er.com/html/425957.html

猜你在找的HTML相关文章