Search code examples
jqueryinputmaxlength

Displaying input character limit inside of the input?

I have set up a character limit function which displays how many more characters the input will accept. I would like to move the output to be within the input, floated to the right, as seen below. What would be the best way to accomplish this?

Example:

enter image description here

<input name="name" placeholder="name" maxlength="120" />
<div class="remaining"></div>

function characterLimit() {
    var remaining = 120 - $('input').val().length;
    $('.remaining').text(remaining);
}
characterLimit();

$('input').keyup(function() {
    characterLimit();
});

Fiddle

Solution

  • It's done by killing the original borders on the input and make a fake border(wrapper div) that surrounds the input and the number.

    Here is an example from my comment http://jsfiddle.net/9q319a4c/2/

    <div class="input">
    <input name="name" placeholder="name" />
    <span class="remaining"></span>
</div>

    CSS

    input {
    border: none;
}
.input {
    border: 1px solid #ccc;
    float: left;
}