采用Vue,实现div模拟textarea文本域及高度自适应

使用很简单,一个普通的block元素上加个contenteditable=”true”

div 可以实现模拟textarea, span 可以实现模拟input

问题: ios 点击无法获得焦点,点击没有反应。android手机能够点击并进行输入。
解决: ios文字无法输入,添加style=”-webkit-user-select:text”,如果引用了fastclick.js文件,需要给div加上needsclick的class,例如< div class=”needsclick”>不然也无法输入。

页面结构

<div contenteditable class="text needsclick" id="content" :class="inputClassObj" @focus="getFocus" @blur="getBlur" style="-webkit-user-select:text" @input="changeVal">请输入文字div>

交互

        /* div 模拟 输入框 */
        getFocus (val) {
            console.log(123456);
            if (!this.inputText) {
                val.target.innerText = '';
                // this.placeholderText = '';
            }
        },
        getBlur (val) {
            console.log(11111);
            if (val.target.innerText == '') {
                val.target.innerText = '请输入文字';
                // this.placeholderText = '请输入文字';
            }
        },
        changeVal(val) {
            this.inputText = val.target.innerText;
            console.log('this.inputText==>', this.inputText)
        },

修饰

    .text {
        width: r(670);
        height: auto;
        min-height: r(160);
        max-height: r(200);
        border: r(1) solid #cecece;
        font-size: r(24);
        text-align: justify;
        overflow-y: auto;
        outline: none;
        margin: 0 auto;
        margin-top: r(100);
    }
    .placeholderClass {
        color: #ccc;
    }

采用Vue,实现div模拟textarea文本域及高度自适应_第1张图片

采用Vue,实现div模拟textarea文本域及高度自适应_第2张图片

使用很简单,一个普通的block元素上加个contenteditable=”true”就ok了,如下:

    <div class="test_box" contenteditable="true" style="-webkit-user-select:text"><br /></div> 
    .test_box {
        width: 400px; 
        min-height: 120px; 
        max-height: 300px;
     }

出现的问题和解决方案:

1.ios文字无法输入,添加style=”-webkit-user-select:text”,如果引用了fastclick.js文件,需要给div加上needsclick的class,例如< div class=”needsclick”>不然也无法输入。

2.如果只想输入纯文本,使用:-webkit-user-modify: read-write-plaintext-only。

3.ios发现换行光标不移动,与mui.css冲突,添加*{-webkit-user-select:auto;}

4、 现代浏览器如Firefox在可编辑模式下的div获取焦点的时候会有虚框,而实际上textarea是没有虚框显示的,此迹象会暴露出div是个冒牌货,所以,需要添加下面的样式:outline:0;

5、 Firefox浏览器下可编辑模式的div如果内部元素是空空的,那么其在获取焦点是时候,光标不可见或是与外部div齐高,这也是会暴露出自己是textarea冒牌货的,所以,默认情况下,我们可以在此div中增加一个孤单的
换行标签。但是,IE8下,如果有个默认的br标签,光标位置可能会在第二行闪来闪去,所以,IE8下可编辑div里面默认是不能有br标签的,这个嘛,您自己想办法清掉吧。

6、 IE浏览器下(IE6~8),输入文字回车的时候,div内部是会自动产生p标签包含每行元素的,而其他浏览器貌似是产生br标签(这里尚未全部测试,如有不准,欢迎指正)。由于默认的p标签是有1em大小的上下margin值的,为了效果统一,我们可以设置诸如下面的样式清除p标签的margin值:.test_box p{ margin: 0; }

7、可编辑模式的div输入的内容都会是很正宗的HTML代码,如果作为内容提交的话需要进行HTML字符过滤。还有,如果您是从其他页面上拷贝一段内容过来,然后粘贴到可编辑模式下的div中,会连HTML也完整的复制过来的(不同于textarea),所以,这里也有必要进行HTML字符过滤(例如web QQ)。

8、 IE6浏览器不支持max-height属性,所以,只用CSS是无法实现超过一定高度出现滚动条的效果,需要js配合实现。

9、 可编辑模式的div标签与textarea一样,是支持focus, blur事件的。自然也支持focus伪类,demo页面中Firefox等现代浏览器获取焦点时的外发光就是使用的:focus。

10.脚本控制自动获取焦点:

var editor = document.getElementById('#div');
editor.onfocus = function () {
  window.setTimeout(function () {
    var sel,range;
    if (window.getSelection && document.createRange) {
      range = document.createRange();
      range.selectNodeContents(editor);
      range.collapse(true);
      range.setEnd(editor, editor.childNodes.length);
      range.setStart(editor, editor.childNodes.length);
      sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
    } else if (document.body.createTextRange) {
      range = document.body.createTextRange();
      range.moveToElementText(editor);
      range.collapse(true);
      range.select();
    }
  }, 1);
}

editor.focus()

你可能感兴趣的:(前端)