Question

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

我已经尝试过在Android浏览器上查看这是否是一个新标准，但只提出了一年前关闭但没有解决方案的问题的引用：https://github.com/jquery/jquery-mobile/issues/382

这是标签和输入代码：

input

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

更新：删除标签上的输入标识符（for =“phone”）可以解决问题，但在语法上不正确。似乎是一个奇怪的错误，或HTC浏览器上的“功能”。

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

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

Answer 2

你可以通过添加以下css

来解决这个问题

-webkit-user-modify: read-write-plaintext-only;

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

2 个答案: