android H5+app混合应用之 - contenteditable属性

最新推荐文章于 2021-11-22 11:39:23 发布

痞子前端

最新推荐文章于 2021-11-22 11:39:23 发布

阅读量3.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：移动开发

本文链接：https://blog.youkuaiyun.com/fengri5566/article/details/22035331

移动开发专栏收录该内容

1 篇文章

订阅专栏

本文探讨了在Android H5与APP混合应用中遇到的contenteditable属性问题，特别是在Android 4.1.2及以下版本的兼容性挑战。在商品价格输入场景下，contenteditable属性用于解决input定宽导致的排版问题，但在低端Android设备上可能无法正常工作，如无法输入或光标定位错误。作者提供了测试代码，并指出在iOS上的测试未进行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在是智能终端遍天下，各种APP如雨后春笋般，掘地突起。这让我们做前端的兄弟姐妹们有些忙不过来，一边忙学习各种新知识如H5、CSS3、JS 等，一边面对着各种需求问题，PC端好不容易能弄的差不多了，现在APP的问题又来了！今天所说的问题正是其中这一，即android低端机（一般来指android4.0以下版本的机器）的问题！

contenteditable属性

contentEditable属性用来表明一个元素是否处于可编辑的状态.其属性值有以下几种:

true,或者是一个空字符串,表明该元素可编辑.

false 表明该元素不可编辑.

classname 继承父元素的 contenteditable 属性.

来源：http://www.w3school.com.cn/html5/att_global_contenteditable.asp

最近，做了两个移动APP项目，两个APP中都有一个效果让我想起了这个属性，就是商品价格可输入时，因为长度不一，如使用input只能定宽，导致页面排版出现过多的空白。因定宽值取的是规定可输入数字长度，对于个位数来讲就会显示过多的空白，且如果价格输入后面还带有文字的时候（如：元），则更明显。

本以为它应该会在移动端被支持得很好，但测试结果却是那么地不尽如人意，至少android 4.1.2（因本人使用的手机系统就是这个版本）及以下版本不支持，或支持不友好，android 4.1.2看似支持，点击带contenteditable的DIV时，会弹出键盘，但无法输入，光标定位不到DIV内。而测试机android 2.3则完全不支持。

测试源码（只测试了针对DIV）：

<div class="edit-area">
    <div class="edit" contenteditable="true"></div>
</div>

这些测试都是通过phoneGap来打包测试的，基本可以完全达到了测试的环境要求。

另外，因技术有限，只会使用JAVA搭Android apk，所以IOS上无法进行测试。

注：如您看到了这篇文章，也可进行测试，有不同意见更是欢迎一起讨论。