CODEWITHSUNDEEP
jqueryinputmaxlength
APAD1
APAD1

Reputation: 13666

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

Upvotes: 1

Views: 58

Answers (2)

Aneesh R S
Aneesh R S

Reputation: 3827

$(function(){
  
characterLimit();

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

function characterLimit() {
    var remaining = 120 - $('input').val().length;
    $('.remaining').text(remaining);
}
.container{
    width:300px;
    position:relative;
}
input{
    width:100%;
}
.remaining{
      color: #5a5a5a;
    display: block;
    position: absolute;
    right: 0px;
    top: 0px;

}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div class="container">
<input name="name" placeholder="name" />
<div class="remaining"></div>
</div>

Add these css

Upvotes: 1

Huangism
Huangism

Reputation: 16448

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;
}

Upvotes: 1

Related Questions