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

Question

I need to keep an initial value/placeholder in my textbox after it's clicked. It needs to be readonly but allow the user to add characters in after the preset text:

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

When the user clicks in the textbox, I need it to move their cursor to after the word "I will" and allow them to type. They cannot be able to delete the words "I will".

Answer 1

Check this basic example based on @Josep suggestion :

 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 will remove the blue box around the input in major browsers. (Just one aesthetic improvement)

Answer 2

Try using focusout event to reset value , readonly attributes after click event

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