<div class="textarea textareaplace" id="userinfo" contenteditable="true" onkeydown="keyD(this);" onkeyup="keyAction(this);" oncopy="keyCop();" onpaste="keyPas()"></div>
js代碼
var textbox = document.getElementById('userinfo'),
g_selectNum=0,
sel = window.getSelection(),
range = document.createRange()；
function keyD(obj){ //按下事件
var a=textbox.innerHTML;
var textA=textbox.innerText.substr(0,20);
range.selectNodeContents(textbox); //將div節點內容加進range內
range.collapse(false);
sel.removeAllRanges();
sel.addRange(range); //j將range物件加入文本域
}
function keyPas(){
var textA=textbox.innerText.substr(0,20);
setTimeout(function(){
var a=textbox.innerHTML;
textbox.innerText=a.replace(/<span.*">|<\/span>/g, ""); //將復制內容中span標簽替換
range.selectNodeContents(textbox);
range.collapse(false);
sel.removeAllRanges();
sel.addRange(range);
},300)
};
function keyCop(obj){
var textA=textbox.innerText.substr(0,20);
a_num=textA.length;
var selectCon=sel.toString()；
g_selectNum=selectCon.length;
}
function keyAction(obj) {
var textA=textbox.innerText.substr(0,20);
a_num=textA.length;
a_arr[1]=a_num;
textbox.innerText=textA;
range.selectNodeContents(textbox);
range.collapse(false);
sel.removeAllRanges();
sel.addRange(range);
}
uj5u.com熱心網友回復：
<div id="txt" contenteditable="true" border: 1px solid #E1E1E1; overflow: auto;">
業余草
CODE大全
http://bbs.csdn.net/topics/390781214
uj5u.com熱心網友回復：
看到網上有好多 關于div模擬輸入框做字數限制的 但是他們都沒有提到 用innerHTML.length 判斷長度 并把innerHTML字串賦給div時 會出現游標默認回到 第一個字符位置 這種情況 難道是我寫法錯誤？？ 我想解決的是游標位置問題 也十分感謝樓上給我提供的資料 雖然我并沒有找到答案 謝謝uj5u.com熱心網友回復：
無奈 找不到解決辦法 想到了折中方法 當到達最大限度是 讓div失焦 有大神解決了的求回復或 通知一下
uj5u.com熱心網友回復：
function set_focus(el){
el=el[0]; //jquery 物件轉dom物件
el.focus();
if($.support.msie)
{
var range = document.selection.createRange();
this.last = range;
range.moveToElementText(el);
range.select();
document.selection.empty(); //取消選中
}
else
{
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
}
這么久了，想必各位都找到方法了，回復一下，方便后來人。這也是我從別的地方找到的，找了好久，具體在哪找的也忘了(尷尬！)。如非法轉載，私信，會立即洗掉
uj5u.com熱心網友回復：
既然是模擬的輸入框，當字數達到限制數量之后，直接將contenteditable屬性置為false即可，沒必要這么麻煩呀！uj5u.com熱心網友回復：
既然是模擬的輸入框，當字數達到限制數量之后，直接將contenteditable屬性置為false即可，沒必要這么麻煩呀！uj5u.com熱心網友回復：
萬分感謝
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/89819.html
標籤：HTML5
上一篇：關于COOKIE的問題，如何每次跳轉一次鏈接就存一個地址，之后再取出來
下一篇：求大佬解答