今晚挺闲的~~嗯.没错,今天下了个早班,所以写了两篇文章~~~
这篇要说的是一个可以让任何html都可以拥有跟input/textarea一样的输入能力~~
contenteditable属性
先上效果图:
看起来是不是跟input或者textarea差不多!
其实这个是一个div来的,下面上代码:
//html <div contenteditable="true"></div>
//js
$('[contenteditable]').focus(function() {
// 干掉IE http之类地址自动加链接
try {
document.execCommand("AutoUrlDetect", false, false);
} catch (e) {}
$(this).on('paste', function(e) {
e.preventDefault();
var text = null;
if(window.clipboardData && clipboardData.setData) {
// IE
text = window.clipboardData.getData('text');
} else {
text = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('在这里输入文本');
}
if (document.body.createTextRange) {
if (document.selection) {
textRange = document.selection.createRange();
} else if (window.getSelection) {
sel = window.getSelection();
var range = sel.getRangeAt(0);
// 创建临时元素，使得TextRange可以移动到正确的位置
var tempEl = document.createElement("span");
tempEl.innerHTML = "&#FEFF;";
range.deleteContents();
range.insertNode(tempEl);
textRange = document.body.createTextRange();
textRange.moveToElementText(tempEl);
tempEl.parentNode.removeChild(tempEl);
}
textRange.text = text;
textRange.collapse(false);
textRange.select();
} else {
// Chrome之类浏览器
document.execCommand("insertText", false, text);
}
});
});js是为了防止复制文本进去的时候会把文字默认的颜色给复制进去了的阻止方法(也就是清空复制粘贴文字的css样式);
QQ空间发表说说/知乎发表文章都是使用这个属性来做的;
