我正在尝试将文本叠加在文本区域中,并在div中使用相同的文本.我设法让它在所有浏览器中工作但FireFox(我使用的是8.0).在FireFox中,textarea内的文本向左移动1px.
这是我的代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
div, textarea
{
position:absolute;
top: 0px;
left: 0px;
margin: 0px;
padding: 0px;
font-family: Consolas;
font-size: medium;
border:none;
border-width: 0px;
}
div {color:red;}
textarea {color: blue;}
</style></head>
<body>
<textarea>Stuff</textarea>
<div>Stuff</div>
</body>
</html>
我想创建一个textarea,突出显示超出字符限制的文本(如twitter一样).
我的尝试在这里:http://jsfiddle.net/X7d8H/1/
<div class="wrapper">
<div class="highlighter" id="overflowText"></div>
<textarea id="textarea1" maxlength="200"></textarea>
</div>
<div id="counter">Letters remaining: 140</div>
<input type="Button" value="Done" id="doneButton"></input>
* {
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 …