(vue 开发环境,可避免在ios中输入框获得焦点页面被推上去一段距离的问题)
1.可输入状态
contenteditable="true"属性可以把div变为可输入状态
2.手机可输入
只有contenteditable="true"的话在手机上应该是不能输入的,给div加上样式属性
user-select:text;
-webkit-user-select:text;
3.输入内容
可以通过监听div的input事件来监听input的输入内容(event.target.innerText)
4.光标位置
if(window.getSelection){ //ie11 10 9 ff safari
var range = window.getSelection();
range.selectAllChildren(obj);
range.collapseToEnd(); //光标移至最后
}else if(document.selection){ //ie10 9 8 7 6 5
var range = document.selection.createRange();
range.moveToElementText(obj);
range.collapse(false); //光标移至最后
}
里面的obj即可输入的div
5.placeholder
placeholder提示可以做个元素放到上面,就不展开说了