在输入内显示输入字符限制？

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

通过杀死输入上的原始边框并制作围绕输入和数字的假边框（包装div）来完成。

以下是我的评论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