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.判断有无网

 

posted @ 2018-10-08 11:09  yuesu  阅读(714)  评论(0编辑  收藏  举报