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>
Share: