[js/問題] 自動將貼在contenteditable div上的HTML文字轉換成純文字

作者: banana2014 (香蕉共和國)   2015-05-17 12:31:42
我現在正在做一個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這種極不專業的寫法呢?
上面我自己寫的程式大致上就這兩個問題
如果各位覺得這樣寫不好可以幫我全部翻改也沒關係,謝謝各位!

Links booklink

Contact Us: admin [ a t ] ucptt.com