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

Question

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.

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 1

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:

..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.

Solution 2

If you want those values to be editable, the easiest way is to keep using inputs as you are already doing. To make those inputs better blend with the rest of the content, you can easily change their styles via CSS. Just assign the inputs a class and then give it some styles in your stylesheet.

If instead those elements are only going to be changed via script, and not edited directly by the user (with the user editing those values through other means), you can replace them with spans (for example <span id="userName"></span>) and setting their content with $('#userName').text('Jim Smith');

Solution 3

My suggestion isn't as pretty as @Josh Crozier's answer but if you were to keep the <input> elements you could use a little jQuery to count the characters and then update the width of the input element as the text grows.

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/

Comments

[hungerstar]

Like this contentEditable attribute. Learned something new today!

[Josh Crozier]

1+ .. but I suggest using a font such as monospace so that all the characters are the same width. Currently, if you type in a bunch of w's, the input won't be big enough. Likewise, if you type in a bunch of i's, there will be extra whitespace. You may want to consider relative units such as ems too.

[hungerstar]

@JoshCrozier true that. This solution could get a little "touchy" depending on font usage. Tweeking would be required.

[NateHill]

@JoshCrozier This worked perfectly. Thanks for the great explanation and for sharing this info.

[NateHill]

Thanks @hungerstar -- my original thinking was to somehow count the characters up and then update the width of the input fields so thank you very much for explaining how that would be accomplished

[NateHill]

thanks for the feedback @StefanoDalpiaz -- I still need to get a grasp of CSS to take advantage of what you suggested but your other suggestion of assign the inputs a class makes sense. thanks again