HTML, alternative <input type = text>, which can be assigned a unique identifier and which fits into the text

Question

Which html element can an identifier be assigned, and also an alternative for the element <input>? Because the item is currently being used to update this block of text based on user input; however, the appearance of the element <input>does not work, since it has a 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 is also a restriction on how much the window will expand.

, ? , , ( ) .

Answer 1

contentEditable, .

span, id contentEditable="true".

, .

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

input, .text(), .val().

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

.. JS:

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

---

:

.. : ()

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

contentEditable , span. .

Answer 2

, , , . , CSS. , .

script ( ), (, <span id="userName"></span>) $('#userName').text('Jim Smith');

Answer 3

, @Josh Crozier, <input>, jQuery , .

HTML

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque 
    <input class="user-input" id="text-username" type="text" placeholder="username"> 
    eget pharetra eros. Suspendisse consequat magna id sapien ullamcorper, 
    eu dignissim lacus viverra. Vivamus euismod luctus lorem, et sodales 
    ipsum maximus sit amet. Maecenas nec 
    <input class="user-input" id="text-other" type="text" placeholder="other"> 
    dapibus nisi. Sed condimentum sodales nibh, nec consequat velit.
</p>

CSS

input {
    background-color: #eaeaea;
    border: none;
    text-align: center;
    width: 105px; /* base on 15 characters at 7px each */
}

JQuery

$('.user-input').each(function( index ) {

    $(this).on('keydown', function(e) {

        var $input = $(this);
        var len = $input.val().length;

        if ( len > 15 ) { // 15 * 7px = 105px = width of input
            var width = len * 7; // 7px per character?        
            $input.css('width', width);     
        }         

    });

});

jsFiddle: http://jsfiddle.net/369jwLt6/4/