如何在HTML输入文本中添加默认文本

Question

如何在HTML文本中添加默认文本，如下图所示

现在这是我的HTML代码：

<input type="text" class="form-control input-sm" name="guardian_officeno" placeholder="Office #" required pattern="[0-9].\d{8}|\d{11}" title="Only Numbers are accepted and must be 10 or 11 numbers"></td>
  </div>

编辑：

如何添加无法删除的文字

Answer 1

根据您最近的问题更新，您需要在readonly标记中添加input属性。如果您尝试禁用部分输入，这是不可能的，请参阅我的答案的最后一部分。

<input type="text" value="SOME_DEFAULT_VALUE" readonly>

添加readonly会阻止用户更改input框中的文字。

  

注意：不要依赖readonly，因为它可以轻松覆盖使用   开发工具。确保你有相同的服务器端检查。

在您更新问题之前

如果您想要value框中的某些默认文字

，请将input属性添加到您的input标记中

<input type="text" value="Default Val">

如果您正在谈论前缀，即国家/地区特定的STD代码，例如+63，那么您可以分割input代码，并在第一个代码中设置默认值，让您的用户写下数字在另一个标签。

Answer 2

编辑，标签值为：

https://www.w3schools.com/tags/att_input_value.asp

<input type="text" class="form-control input-sm" name="guardian_officeno" placeholder="Office #" required pattern="[0-9].\d{8}|\d{11}" title="Only Numbers are accepted and must be 10 or 11 numbers"  value="default text"></td>
  </div>

Answer 3

你的意思是你要在＆＃34;输入＆＃34;中添加默认文本。标签？ 你需要添加＆＃34;值＆＃34;在那里属性！

<input type="text" class="form-control input-sm" name="guardian_officeno" placeholder="Office #" required pattern="[0-9].\d{8}|\d{11}" title="Only Numbers are accepted and must be 10 or 11 numbers" value="put your default text right here"></td>

Answer 4

输入标记不支持css中的before属性，但您可以使用其他标记的包装器。请看下面的例子：

html + css

<div class="input-row">
    Phone number:<span id="phoneNumber"><input type="text" name="phoneNumber" value="" placeholder="1234567890"></span>
</div>
<style>
    .input-row {
        display: inline-block;
        line-height: 1;
    }
    span#phoneNumber::before {
        content: '+63';
        display: inline-block;
        border: 1px solid #ccc;
        padding: 1px;
        line-height: 20px;
        margin: 0px;
    }
    input[name='phoneNumber']{
        line-height: 18px;
        border: 1px solid #ccc;
        margin: 0px;
        padding: 2px;
    }
</style>