div 模拟输入框
1.默认分享文案:发现一个好玩的歌房,快来一起玩吧~ ,获取鼠标时,默认文案消失
利用 empty,focus,before 伪元素解决,模拟placeholder
<div class="editBox" contenteditable="true" placeholder="发现一个好玩的歌房,快来一起玩吧~"></div>
.editBox:empty:before{ content: attr(placeholder); color:#999; } .editBox:focus:before{ content:none; }
2.最多输入140个汉字 ,已输入文字数量随输入实时变化。超出140汉字时,不能输入进去
问题:
1.输入框粘贴,去掉格式,截取字数
2.超过140字时,再次输入,光标总是默认在最前面,需要记录光标的位置
// 获取输入框内容,先记录光标的位置,截取140字后,重新设置光标位置 inputChange(e) { this.cursorPos=this.getCursorPosition(e.currentTarget); if(e.currentTarget.innerText.length > 140){ this.shareTipFn(1,"内容不能超过140字"); e.currentTarget.innerText=e.currentTarget.innerText.substr(0,140); this.setCursorPosition(e.currentTarget,Math.min(this.cursorPos,140)); } this.content=e.currentTarget.innerText; this.curTextLen=this.content.length; }, // 输入框粘贴处理 inputPaste(e) { e.preventDefault(); var clipboar = e.clipboardData || e.originalEvent.clipboardData; if (clipboar) { var text = clipboar.getData('Text'); String.insertAtCaret(e.currentTarget, text); this.inputChange(e); } }, //获取当前光标位置 getCursorPosition (element) { var caretOffset = 0; var doc = element.ownerDocument || element.document; var win = doc.defaultView || doc.parentWindow; var sel = win.getSelection(); if (sel.rangeCount > 0) {//选中的区域 var range = win.getSelection().getRangeAt(0);//获取指定的选中区域 var preCaretRange = range.cloneRange();//克隆一个选中区域 preCaretRange.selectNodeContents(element);//设置选中区域的节点内容为当前节点 preCaretRange.setEnd(range.endContainer, range.endOffset); //重置选中区域的结束位置 caretOffset = preCaretRange.toString().length; } console.log(caretOffset,sel.focusOffset); return caretOffset; }, // 设置光标位置 setCursorPosition(element, pos){ var range = document.createRange();//创建一个选中区域 range.selectNodeContents(element);//选中节点的内容 if(element.innerHTML.length > 0) { range.setStart(element.childNodes[0], pos); //设置光标起始为指定位置 } range.collapse(true); //设置选中区域为一个点 var selection = window.getSelection();//获取当前选中区域 selection.removeAllRanges();//移出所有的选中范围 selection.addRange(range);//添加新建的范围 },
3.点击分享,
1.设置flag标记,防止频繁点击
2.判断有无网