zoukankan      html  css  js  c++  java
  • 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.判断有无网

  • 相关阅读:
    .net core3.1 abp动态菜单和动态权限(思路) (二)
    .net core3.1 abp学习开始(一)
    api.versioning 版本控制 自动识别最高版本
    .netcore 定制化项目开发的思考和实现
    netcore 非注入全局获取配置文件
    linux nginx搭建与使用
    linux docker .net core 从建立网站到预览
    linux 学习 mysql安装到连接
    linux 安装redis及问题收集
    为何说要多用组合少用继承?如何决定该用组合还是继承?
  • 原文地址:https://www.cnblogs.com/yuesu/p/9753231.html
Copyright © 2011-2022 走看看