HTML alternative to <input type=text> that can be assigned a unique ID and that blends in with text

What html element is capable of being assigned an ID and is also an alternative for the <input> element? Because currently an element is being used in order to update that block of text based on user input; however, appearance-wise, the <input> element doesn’t work since it has the large rectangular block around it.

<div id="myModal">
...
<input type="text" id="txtUserName" size="150" disabled></input>
...
</div>

<script>
$('#txtUserName',$('#myModal')).val('Jim Smith');
</script>

In addition to the rectangular block around the text there also appears to be a limit on how far the box will expand.

enter image description here

Thoughts or suggestions on how the updated text can blend in seamlessly with the rest of the text? Because ultimately the goal is for the user to be able to send what appears in the modal (a combination of pre-filled text and the user input) to another person via email.


solution

You could use the contentEditable attribute to make any element editable.

Example Here

In this case, just use a span, specify your id and set contentEditable="true".

In doing so, the element will blend in with the paragraph, and it can still be edited by the end user.

<span contentEditable="true" id="txtUserName"></span>

Since the element is no longer an input, use the .text() method as opposed to .val().

$('#txtUserName').text('Jim Smith');

…or with plain JS:

document.getElementById('txtUserName').textContent = 'Jim Smith';

Result when focusing on the element:

enter image description here

..and if you don’t want the outline: (example)

span[contentEditable="true"] {
  outline: none;
}

One of the benefits of using the contentEditable attribute is that the text will wrap and continue to behave as a span element. This isn’t achievable using an input.

enter image description here