![](https://img2018.cnblogs.com/blog/1437553/201810/1437553-20181008105438416-1777198176.png)
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.判断有无网