Question

点击后，我需要在文本框中保留初始值/占位符。它只需要readonly但允许用户在预设文本后添加字符：

<input type="text" placeholder="I will " name="title" required maxlength="50">

当用户点击文本框时，我需要它将光标移动到“我愿意”这个词之后并允许他们输入。他们无法删除“我愿意”这几个字。

Answer 1

根据 @Josep 建议检查此基本示例：

＆＃13;

label{
    border: 1px solid;
}
input{
    border: 0px;
    height: 100%;
    font-family: inherit;
    outline: none;
    font-size: 16px;
    padding: 0px;
}

＆＃13;

<label>I will <input type="text" name="title" required maxlenght="50" /></label>

＆＃13;

Outline: none将删除主要浏览器中输入周围的蓝框。（只是一个美学改进）

Answer 2

尝试使用focusout事件在value事件后重置readonly，click属性

$("input").on({
  click:function(e) {
    $(this).removeAttr("readOnly")
  }, 
  focusout: function(e) {    
    this.value = this.getAttribute("placeholder") 
                 + this.value.replace(/^I will /, "");
    $(this).prop("readOnly", true);
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input type="text" placeholder="I will " name="title" required maxlength="50" readonly>

单击后在文本框中保留初始值

2 个答案: