输入占位符未显示

Question

在我聚焦然后取消聚焦该字段之前，占位符不会出现。

<input type="tel" name="natid" id="natid" class="form-control"    onfocus="this.placeholder = ''" onblur="this.placeholder = 'Hello'" required="" value="" maxlength="10" pattern="[0-9]{10}" style="width: 100%;height: 10vw;color: #000;font-weight: 400;font-size: 5vw;letter-spacing: 0.5em;">

Answer 1

在您的标签中添加 placeholder="hello"。

<input type="tel" name="natid" id="natid" class="form-control" placeholder="Hello"    onfocus="this.placeholder = ''" onblur="this.placeholder = 'Hello'" required="" value="" maxlength="10" pattern="[0-9]{10}" style="width: 100%;height: 10vw;color: #000;font-weight: 400;font-size: 5vw;letter-spacing: 0.5em;">

Answer 2

这是因为你写了以下部分：

onblur="this.placeholder = 'Hello'"

因此，占位符只会在模糊事件上设置

要显式设置占位符，请使用输入标签的占位符属性：

<input placeholder="Hello">

Answer 3

再添加一个属性placeholder="Hello"。所以当页面加载时，占位符将显示。

<input type="tel" name="natid" id="natid" class="form-control" placeholder="Hello"   onfocus="this.placeholder = ''" onblur="this.placeholder='Hello'" required="" value="" maxlength="10" pattern="[0-9]{10}" style="width: 100%;height: 10vw; color: #000; font-weight: 400; font-size: 5vw;letter-spacing: 0.5em;">

输入占位符未显示

input placeholder is not showing

html

css

input

placeholder