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中对应的字母都会变为红色，请问这个怎么实现啊？？谢谢拉～～～～～～～

30 个解决方案

#1

做不到

#2

两个textarea做不到，可以用在线编器方法模拟

#3

模拟....

#4

做打字速度测试啊?用编辑的DIV实现

#5

自己想思路去吧
<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>

#6

应该是web编辑器把，数据框能够输入不同颜色的字吗？css控制的不算

#7

请问怎么模拟啊？就事打字速度测试

#8

这个我已经试了很久了，还是不能实现功能。

leohuang(LEO) ( ) 信誉：99    Blog   加为好友  2007-04-27 22:49:54  得分: 0

   自己想思路去吧
<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>

#9

leohuang(LEO) 的做法有意思，开眼了

谢谢 LZ 的问题，俺去帮 LZ 试试看，哈

#10

FF不兼容leohuang(LEO) 的做法啊？怎么办？

#11

还是用可编辑DIV吧，leohuang(LEO)的好像可行，不过我的IE一刷新页面就死掉了，而且这个在其它浏览器也不行

#12

还要考虑兼容性的问题呀，那就只能模拟了，不过应该也不难！

俺先按 leohuang(LEO) 的思路做一个玩玩

#13

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">
  
  </script>
</body>

#14

如果模拟的话，就把 <textarea id="divTest" rows="5" cols="30">abcdefghijk</textarea>
换成 div 即可
如果输入有误，就让 div 中相应位置的字符变色！

#15

<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>

#16

楼上写的好，可是FF不可用呀

#17

上面两端代码都可以实现英文，可是能否实现中英文混合输入呢？而且需要两个textarea都变颜色，请教各位大大，谢谢拉

#18

在线编辑器
ifrmae设置编辑状态,选中并用insertHTML

#19

小弟愚笨，还是不太懂，麻烦给段示例代码看看好吗？谢谢了

#20

呵呵
挺好玩的
我大学时候也写过一个
有空找出来贴上
先留个名

#21

用AJAX很简单的

#22

不错......

#23

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
※以下是引用21楼 wenbinsong() 在2007-04-28 13:11:05 的发言：
──────────────────────────────────────────
用AJAX很简单的
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
由此可见AJAX的概念被滥用到什么程度了...
这关AJAX什么事...
纯JS问题

#24

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
※以下是引用17楼 youmiao666(西方之猪) 在2007-4-28 11:47:49 的发言：
──────────────────────────────────────────
上面两端代码都可以实现英文，可是能否实现中英文混合输入呢？而且需要两个textarea都变颜色，请教各位大大，谢谢拉
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
如果要求中文的话能难做到了
至少要用三个textarea,因为你要这样做必须要用到onpropertychang事件,如果只用两个textarea会陷入死循环

#25

请看下第二步需要用什么方法？
（1）首先创建一个TextRange()：
var SearchRange = document.body.createTextRange();
（2）然后选中test（如题）中的第四个字母：

（3）最后换为我要显示的效果：
HtmlEdit1.document.body.createTextRange().pasteHTML(html);

#26

这个问题问得不错,学习ing...

#27

mark

#28

<div ></div>有个属性可以使之能编辑，具体属性是什么，我忘了，自己找一下，用div代替textarea 实现以上功能

#29

该回复被版主删除

#30

div可编辑是contenteditable属性，比如
<div contenteditable>这些是可以编辑的</div>
FF下用designMode

#31

顶一下吧

#1

做不到

#2