Отображение предела входного символа внутри входа?

Question

Я установил функцию ограничения символов, которая отображает, сколько символов будет принимать вход. Я хотел бы переместить вывод в пределах input, перемещенный вправо, как показано ниже. Какой был бы лучший способ сделать это?

Пример:

<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

Answer 1

Это сделано, убивая оригинальные границы на входе и сделать поддельную границу (обертка ДИВ), которая окружает вход и номер.

Вот пример из моего комментария 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; 
} 

Answer 2

$(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>

Добавить эти CSS