当前位置: 代码迷 >> JavaScript >> js的textarea中字体颜色改变有关问题
  详细解决方案

js的textarea中字体颜色改变有关问题

热度:155   发布时间:2012-03-28 15:40:03.0
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
  相关解决方案