码迷,mamicode.com
首页 > 其他好文 > 详细

div模拟文本输入框做字数限制 用substr限制 当字数达到后光标会回到开头 用range对象限制但是删除

时间:2019-12-26 09:33:10      阅读:80      评论:0      收藏:0      [点我收藏+]

标签:tostring   func   copy   内容   str   obj   element   EAP   get   

<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);
}

div模拟文本输入框做字数限制 用substr限制 当字数达到后光标会回到开头 用range对象限制但是删除

标签:tostring   func   copy   内容   str   obj   element   EAP   get   

原文地址:https://www.cnblogs.com/BluceLee/p/12100034.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!