There is an input type = "text". I need that when loading the page, the pipe (vertical bar) was already in the input field (there was no need to click on the input field to start typing text) and that the word and space that could not be erased were added to the beginning of the input field.

  • 2
    The word can be added to the attribute value = "Word". There is an autofocus attribute for input for automatic field selection, but it is added only in HTML5 - therainycat
  • Yes, autofocus is what you need. I forgot to write about the word that it is necessary that this word could not be erased, so the value will not work. - A.Hall 7:08 pm
  • one
    To prevent erasure, you can make an input field in javascript without a bicycle like this: <div id = "wrap"> <div id = "prefix"> Word </ div> <input type = "text"> </ div>. Element #wrap add a frame and other styles, as in the usual input, and the input itself to make transparent. Element #prefix give display: inline-block, so that the line does not translate, and ready - therainycat

1 answer 1

The cursor in the input field when the page is loaded is the autofocus attribute of the input:

<input type="text" name="name" autofocus>

It does not work in IE, but there is an elementary polifil:

 jQuery(function ($) { if (!("autofocus" in document.createElement("input"))) { $('[autofocus]:first').focus(); } });

To add a word and a space, there are two ways:

  • On backend, when rendering html add attribute value="ваше слово " to input

  • On the front end, in a js script

The js-script will be almost the same as the polyfil above:

 jQuery(function ($) { if (!("autofocus" in document.createElement("input"))) { $('[autofocus]:first').val("ваше слово "); } });

If you wish, you can combine them into one.

UPD: From the comments to the question "So that the word with a space cannot be erased," then it is better to simply sign the word to the left of the input, without associating with the input. In the input we enter only the "additive", and we only send this additive to the server, and on the server we already resolve it as needed (for example, we glue the additive with your word and save it in this form in the database).