用contenteditable="true"属性把div模拟为input、textarea

(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提示可以做个元素放到上面,就不展开说了

你可能感兴趣的:(用contenteditable="true"属性把div模拟为input、textarea)