Add editable text after cursor in input field

Question

I am trying to add non-editable text after the cursor to the text box / input box to achieve the following:

1) The text before the cursor is edited 2) The text after the cursor is not edited and moves right / left when the text on the left is added / deleted

ENTRANCE FIELD: [editabletexthere {cursorhere} un-editabletexthere]

Here is the code for my input window:

<input id="edit_input" type="text" autocapitalize="off" autocorrect="off" spellcheck="false" autofocus onfocus="this.value = this.value;" value="editabletext" style="width:100%;"></input>

I feel that the input values ​​should fit within the range, and for the second range, just style with contenteditable = false ;. I would also like to stylize non-editable text to a different color. Any help is appreciated. Thank.

Answer 1

Perhaps this is not the best solution, it is a kind of hack, but it works fine. The idea is to create a div that looks like an input field inside a 2 span, and you make one of them editable.

  <div>
    <span contenteditable="true" id="edit_input_fake">Input</span>
    <span class="trailing">Trailing text</span>
  </div>

Run codeHide result

You can create <input type="hidden">where you will copy the contents of the first range (maybe also the second) by clicking / changing the event if necessary.

JSFiddle is available here: http://jsfiddle.net/c6f7ommh/1

Answer 2

JSFiddle - DEMO

You can do it as follows:

HTML:

<input id="edit_input" type="text" autocapitalize="off" autocorrect="off" spellcheck="false" autofocus onfocus="this.value = this.value;" value="editabletext" style="width:100%;"></input>
<p>SOME TEXT</p>

CSS

input {
    width: 100%;
    float:left;
    font-size: 16px;
    padding: 0px 120px 0px 0px;
    box-sizing:border-box;
}
p {
    margin:0px 0px 0px -100px;
    float:left;
    padding-top: 5px;
}

[EDITED]

If you want cursor: default;and user-select: none;- DEMO

Answer 3

If you are trying to tell your users that some text will be added to what they type when it is saved, just adding a label after the text field with an uneditable part is good enough. Then your server code can add the unsent portion to the submitted text at the same time, since I assume that it is a constant.