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

我已经设置了字符限制功能，显示输入接受的字符数量。我想将输出移动到input以内，如右图所示。什么是实现这一目标的最佳方式？在输入内显示输入字符限制？

例子：

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

来源

2015-04-22 APAD1

它是否需要在输入边界内部，还是在它的右边？ – Huangism

我想它是在输入的边界内 – APAD1

你可以绝对定位它，但我认为更好的方法是使用css杀死输入的原始边界并制作一个假边界（包装div）输入和数字。这里是一个非常简单的例子http://jsfiddle.net/9q319a4c/2/ – Huangism

它通过杀死输入原来的边界进行，使围绕输入和数字假的边界（包装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; 
}

来源

2015-04-22 17:48:02 Huangism

这绝对是在箱子外面思考，感谢这个建议！ – APAD1

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

来源

2015-04-22 17:53:34

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

回答

相关问题