<input type='text' maxlength='32' onkeypress='previewLength(32)'>
我希望每次按下一个键时减少32,然后按
我使用它进行长度预览(最大长度为32,每按一次键,它会减少1并向用户显示他剩下多少)
<script>
function previewLength (maxLength) {
maxLength = maxLength -= 1;
document.getElementById('CounterLength').innerHTML = maxLength;
}
</script>
答案 0 :(得分:2)
使用实际值的长度而不是计算按键(例如,退格键会缩短长度而不是增加长度):
<input type="text" maxlength="32" onkeypress="previewLength(this.maxLength, this.value.length, 'CounterLength');">
<script type="text/javascript">
function previewLength (maxLength, actualLength, id) {
document.getElementById(id).innerHTML = maxLength - actualLength;
}
</script>
(通过将maxlength和display element id发送到函数中,它可以重用于多个元素。)
答案 1 :(得分:1)
您有一些误解,您需要查看实际值,而不是按键次数。例如:退格键和左箭头键也是按键,但它们不会增加值的长度。
HTML:
<input type='text' maxlength='32' onkeypress='previewLength(this, 32)'>
^- use `this`
JS:
function previewLength (input_element, maxLength) {
var remain = maxLength - input_element.value.length;
document.getElementById('CounterLength').innerHTML = remain;
}
答案 2 :(得分:0)
我会添加一些检查,不显示负数,只是传递控件的名称
window.updateCounter = function updateCounter(e, name) {
var len = e.value.length
, max = e.maxLength
, remaining = (max - len) > 0 ? max-len : 0
document.getElementById(name).innerHTML = remaining
}
标记
<input type='text' maxlength='32' onkeypress='updateCounter(this, "counter")'/>
<span id='counter'>32</span>