标签文本在表单输入中显示为水印(HTC EVO)

Question

我有一个问题,一个label被自动插入水印的内容input.我已经在一系列手机和浏览器上测试了这一点,但它似乎只发生在HTC EVO(3D X515A)上.当我给它焦点(例如触摸输入)时,文本消失,类似于a的placeholder属性input.js也没有自动填充.

我试图在Android浏览器上查看这是否是一个新标准,但只提出了一年前关闭的问题的一个参考,没有解决方案:https://github.com/jquery/jquery-mobile /问题/ 382

这是标签和输入代码:

<input type="number" name="phone" id="phone" minlength="10" maxlength="10" inputmode="latin digits" required="required" />
<label for="phone">Confirm your Valid Cell Number:</label>

如果有人需要查看问题,我将不得不拍摄手机显示屏的图片,因为它不会发生在我的模拟器上.

---

更新:删除标签上的输入标识符(for ="phone")解决了问题,但在语法上不正确.似乎是一个奇怪的错误,或HTC浏览器上的"功能".

我遇到了HTC浏览器的另一个大问题.当您在输入上自动对焦时,无论您的CSS如何,浏览器都将应用自己的样式.它删除边框和背景颜色,输入看起来是空的,几乎不可见(如果没有闪烁的光标).使用:focus伪类和其他-webkit选择器不能覆盖浏览器的样式.还有另一个问题在这里描述这个问题没有明确的答案.最近我可以得到一个解决方法是从输入中删除样式并将其包装在div中.

Answer 1

我通过在标签中的文本之前添加换行符来修复此问题，如下所示：

<label for="phone">



Confirm your Valid Cell Number:</label>
<input type="number" name="phone" id="phone" minlength="10" maxlength="10" inputmode="latin digits" required="required" />

浏览器实际上正在渲染输入中标签中的文本（包括空格）。多么奇怪/愚蠢的错误啊！