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

如何在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>

编辑：

---

如何添加无法擦除的文本根据您问题的最新更新，您需要将

只读属性添加到
输入
标记中。如果您试图禁用部分输入，这是不可能的，请参阅我答案的最后一部分

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


如果您谈论的是前缀，即特定于国家的STD代码，如+63，那么您可以将
输入标记拆分，并在第一个标记中设置默认值，然后让用户在另一个标记中写入数字。
编辑，使用标记值：


您的意思是要在“输入”标记中添加默认文本？
您需要在其中添加“值”属性

<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>



输入标记不支持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>


电话号码：
.输入行{
显示：内联块；
线高：1；
}
span#phoneNumber:：before{
内容：‘+63’；
显示：内联块；
边框：1px实心#ccc；
填充：1px；
线高：20px；
边际：0px；
}
输入[name='phoneNumber']{
线高：18px；
边框：1px实心#ccc；
边际：0px；
填充：2px；
}
可以只在一个输入标记中完成吗？@adrianpascua不，您不能将部分输入文本保持为可读和部分可编辑。我想你说的是我在回答中提到的最后一部分。
<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>

<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>