js的textarea中字体颜色改变有关问题
日期：2014-05-16 浏览次数：20334 次
js的textarea中字体颜色改变问题
html代码中有两个textarea:
<textarea id=test rows=5 cols=60 oncopy= "return false "> abcdefghijk </textarea>
<textarea id=input rows=5 cols=60 onpaste= "return false " > </textarea>
其中一个已经有内容，现在我在inpu 中输入字母，如果在对应的位置和test不相同，则两个textarea中对应的字母都会变为红色，请问这个怎么实现啊？？谢谢拉～～～～～～～
------解决方案--------------------
自己想思路去吧
<textarea id= "test " rows= "5 " cols= "60 " oncopy= "return false "> abcdefghijk </textarea>
<script language= "javascript ">
var red = document.createElement( "font ");
red.color= "red ";
red.innerText= "a ";
test.appendChild(red);
</script>
------解决方案--------------------
IE 6 下可用，L@_@K
<body>
<textarea id= "divTest " rows= "5 " cols= "30 "> abcdefghijk </textarea>
<textarea id= "divInput " rows= "5 " cols= "30 "> </textarea>
<script language= "JavaScript ">
<!--
var oSample = document.getElementById( "divTest ");
var arrSample = oSample.value.split( " ");
var oInput = document.getElementById( "divInput ");
// 一定要关闭中文输入法, 保持英文输入法!
oInput.onkeypress = function() {
var numIndex = this.value.length;
var strInputChar = String.fromCharCode(event.keyCode)
if (strInputChar != arrSample[numIndex])
{
var oColorChar = colorizeInput(strInputChar, "red ");
this.appendChild(oColorChar);
event.returnValue = false;
}
};
function colorizeInput(strGiven, strColor)
{
var oFont = document.createElement( "font ");
oFont.innerText = strGiven;
oFont.color = strColor;
return oFont;
}
//-->
</script>
</body>
------解决方案--------------------
<html>
<head>
<title> </title>
<SCRIPT language= "JavaScript ">
function Testing()
{
var inputText = document.getElementById( "input ").value;
var chr = document.getElementById( "test ").value.substr(inputText.length, 1);
if (String.fromCharCode(event.keyCode) != chr)
{
var errChar = document.createElement( "font ");
errChar.color= "red ";
errChar.innerText = String.fromCharCode(event.keyCode);
document.getElementById( "input ").appendChild(errChar);
event.returnValue = false;
}
}
</SCRIPT>
</head>
<body>
<textarea id=test rows=5 cols=60 oncopy= "return false "> abcdefghijk </textarea>
<textarea id=input rows=5 cols=60 onpaste= "return false " onkeypress= "Testing() "> </textarea>
</body>
</html>
------解决方案--------------------
div可编辑是contenteditable属性，比如
<div contenteditable> 这些是可以编辑的 </div>
FF下用designMode
html代码中有两个textarea:
<textarea id=test rows=5 cols=60 oncopy= "return false "> abcdefghijk </textarea>
<textarea id=input rows=5 cols=60 onpaste= "return false " > </textarea>
其中一个已经有内容，现在我在inpu 中输入字母，如果在对应的位置和test不相同，则两个textarea中对应的字母都会变为红色，请问这个怎么实现啊？？谢谢拉～～～～～～～
------解决方案--------------------
自己想思路去吧
<textarea id= "test " rows= "5 " cols= "60 " oncopy= "return false "> abcdefghijk </textarea>
<script language= "javascript ">
var red = document.createElement( "font ");
red.color= "red ";
red.innerText= "a ";
test.appendChild(red);
</script>
------解决方案--------------------
IE 6 下可用，L@_@K
<body>
<textarea id= "divTest " rows= "5 " cols= "30 "> abcdefghijk </textarea>
<textarea id= "divInput " rows= "5 " cols= "30 "> </textarea>
<script language= "JavaScript ">
<!--
var oSample = document.getElementById( "divTest ");
var arrSample = oSample.value.split( " ");
var oInput = document.getElementById( "divInput ");
// 一定要关闭中文输入法, 保持英文输入法!
oInput.onkeypress = function() {
var numIndex = this.value.length;
var strInputChar = String.fromCharCode(event.keyCode)
if (strInputChar != arrSample[numIndex])
{
var oColorChar = colorizeInput(strInputChar, "red ");
this.appendChild(oColorChar);
event.returnValue = false;
}
};
function colorizeInput(strGiven, strColor)
{
var oFont = document.createElement( "font ");
oFont.innerText = strGiven;
oFont.color = strColor;
return oFont;
}
//-->
</script>
</body>
------解决方案--------------------
<html>
<head>
<title> </title>
<SCRIPT language= "JavaScript ">
function Testing()
{
var inputText = document.getElementById( "input ").value;
var chr = document.getElementById( "test ").value.substr(inputText.length, 1);
if (String.fromCharCode(event.keyCode) != chr)
{
var errChar = document.createElement( "font ");
errChar.color= "red ";
errChar.innerText = String.fromCharCode(event.keyCode);
document.getElementById( "input ").appendChild(errChar);
event.returnValue = false;
}
}
</SCRIPT>
</head>
<body>
<textarea id=test rows=5 cols=60 oncopy= "return false "> abcdefghijk </textarea>
<textarea id=input rows=5 cols=60 onpaste= "return false " onkeypress= "Testing() "> </textarea>
</body>
</html>
------解决方案--------------------
div可编辑是contenteditable属性，比如
<div contenteditable> 这些是可以编辑的 </div>
FF下用designMode
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
