在輸入內顯示輸入字符限制？

我已經設置了字符限制功能，顯示輸入接受的字符數量。我想將輸出移動到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

在輸入內顯示輸入字符限制？

回答

相關問題