div设置contenteditable="true"，即可编辑，但无法去除从网页粘贴过来内容的格式

Posted 2023-04-09

求粘贴时过滤html格式的方法
js处理

<div contenteditable="true" id="t"></div>
<script>
var d = document.getElementById( "t" );
document.addEventListener( "keyup", function() 
d.innerHTML = d.innerHTML.replace( /<[^>]*>/g, "" );
 );
</script>

参考技术A 你可以在记事本里面粘贴过一篇，再粘贴过去，从网页或word上复制下来的内容都带有自动生成的HTML代码的，从记事本里面可以把这些杂的东西去掉 参考技术B 给个思路
判断div是否变化,发生变化,获取div内容,用正则去掉里面的格式(去百度),在把内容放回div里.

日了 忘记看时间了 11年的 参考技术C

兼容ie11,edge,chrome,firefox,safari:

var element = document.createElement('div');
    element.contentEditable = true;
    element.addEventListener("paste", function (e)
        e.stopPropagation();
        e.preventDefault();        var text = '', event = (e.originalEvent || e);        if (event.clipboardData && event.clipboardData.getData) 
            text = event.clipboardData.getData('text/plain');
         else if (window.clipboardData && window.clipboardData.getData) 
            text = window.clipboardData.getData('Text');
                if (document.queryCommandSupported('insertText'))             document.execCommand('insertText', false, text);
         else             document.execCommand('paste', false, text);
        
    );

参考技术D <div id="editArea" contenteditable oninput="this.innerHTML = this.innerText"></div>

contenteditable设置元素可编辑

需求背景

1. 实现一个输入框，高度可以随着输入文字的增加而自动增高
2. 有placeholder，输入为空时，显示placeholder

我们知道可以将div的contenteditable设置伪true，将其变为可输入状态。代码如下：

<div contenteditable="true"></div>

这样就满足了我们的第一个需求——高度自适应。但是在手机上测试会发现第一个问题，iOS上面无法输入。经过查找资料，发现只需要为其添加如下样式即可:

div{
    user-select:text;
    -webkit-user-select:text;
}

placeholder

通过contenteditable方法实现的输入框无法添加placeholder。

使用css模拟placeHolder

// html
<div contenteditable="true" data-placeholder="请输入手机号码"></div>

// less
div{
    &:empty:before{
        content: attr(data-placeholder);
        color:#bbb;
    }
    &:not(:empty){
        &:focus:before{
            content:none;
        }
    }
}

但是经过测试在不同手机上面变现不一致，所以放弃了这种方案（猜测可能和:not伪类的兼容有关，还没有做验证）。

使用css+js实现 placeholder

思路：根据输入通过动态添加class，模拟placeHolder的行为。

// html
<div class="input-item empty" contenteditable="true" data-placeholder="请输入手机号码"></div>

// less
.input-item{
    user-select:text;
    -webkit-user-select:text;
    &.empty:before{
        content: attr(data-placeholder);
        color:#bbb;
        position: absolute;
    }

}

// js
$(‘.input-item‘).on(‘keyup‘,function(){
    $(this).removeClass(‘empty‘)
    if($(this).text() == ""){
        $(this).addClass(‘empty‘)
    }
})

到此，我们已经实现了第二个需求——可以设置placeholder