Signature

div模拟输入框实现高度自适应

Aug 30, 2017

需求

工单详情里的一个随时可修改的备注框。

问题

input标签只能单行，备注可能很多，在手机上展示不全。 textarea标签，高度自适应需要用js控制，实现起来略麻烦。

解决——div模拟输入框实现高度自适应

使用很简单，如下：

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

网页上测试并没有多大问题，就是用js获取焦点时输入的光标每次都会在最前面。解决方法如下：

if (window.getSelection) {
    obj.focus(); //解决ff不获取焦点无法定位问题
    var range = window.getSelection();//创建range
    range.selectAllChildren(obj);//range 选择obj下所有子内容
    range.collapseToEnd();//光标移至最后
} else if (document.selection) {//ie10 9 8 7 6 5
    var range = document.selection.createRange();//创建选择对象
    range.moveToElementText(obj);//range定位到obj
    range.collapse(false);//光标移至最后
    range.select();
}

最后发现在ios设备上，并没有效果，后来发现还需要添加这个样式：

-webkit-user-select: text;

最后是效果：

<div contenteditable="true" style="border: 1px solid;-webkit-user-select: text;"></div>