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.
In addition to the rectangular block around the text there also appears to be a limit on how far the box will expand.
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.
You could use the
contentEditable attribute to make any element editable.
In this case, just use a
span, specify your
id and set
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
…or with plain JS:
document.getElementById('txtUserName').textContent = 'Jim Smith';
Result when focusing on the element:
..and if you don’t want the outline: (example)
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.