※ [本文转录自 Ajax 看板 #1LM1cngs ]
作者: banana2014 (香蕉共和国) 看板: Ajax
标题: [js/问题] 自动将贴在contenteditable div上的HTML文字转换成纯文字
时间: Sun May 17 12:31:42 2015
我现在正在做一个contenteditable div，当其贴上HTML文字的话，它会自动转变成纯文字
我试着做做看，但是当其第一次贴上HTML文字时，它的光标会跑到所有文字的最前端；之
后贴上HTML文字时，它的光标会自己跑到所有文字的最后方。而且我的方法是用setInterval每
隔一段时间去检查本文框里是否有HTML文字，若有则自动去除掉HTML tags，这样显得很不
专业，是否有别的方法及改善之处呢? 谢谢各位指教！
以下是我自己试试看的程式：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>Test</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
function stripHTML(input){
var output = '';
if(typeof(input) == "string"){
output = input.replace(/(<([^>]+)>)/ig, "");
}
return output;
}
$(function(){
$("#text").focus(function(event){
setItv = setInterval('clearHTML()', 1);
});
$("#text").blur(function(event){
clearInterval(setItv);
});
});
function clearHTML(){
var patt = /(<([^>]+)>)/ig;
var input = $("#text").html();
if(input.search(patt) >= 0){
var output = '';
if(typeof(input) == "string"){
output = stripHTML(input);
}
$("#text").html(output);
}
}
</script>
<div contenteditable="true" style="border: 1px #000 solid; width: 300px;
height: 100px;" id="text"></div>
</body>
</html>
总结以上程式问题：
1.贴上HTML文字后光标该怎样才能自己跑到贴上文字的后方处呢? 就像一般的Text Box一
样，贴上文字后光标会自己跳到“贴上文字”的后方处，而并非“所有文字”的最后方或
最前方。
2.该如何摆脱setInterval这种极不专业的写法呢?
上面我自己写的程式大致上就这两个问题
如果各位觉得这样写不好可以帮我全部翻改也没关系，谢谢各位！