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

Question

单击它后，我需要在文本框中保留一个初始值/占位符。 它必须是只读的，但允许用户在预设文本之后添加字符：

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

当用户单击文本框时，我需要它将光标移动到“我会”一词之后并允许他们键入。 他们无法删除“我会”一词。

Answer 1

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

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

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

Outline: none在主要浏览器中， Outline: none会删除输入周围的蓝色框。 （仅一项美学改进）

Answer 2

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

 $("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>