0
<input type='text' maxlength='32' onkeypress='previewLength(32)'>

每次按下一个键时,我想用 1 减少 32

我使用它进行长度预览(最大长度为 32,每次按下一个键时,它会减 1,并向用户显示他还剩多少)

<script>
function previewLength (maxLength) {
maxLength = maxLength -= 1;
document.getElementById('CounterLength').innerHTML = maxLength;
}
</script>
4

3 回答 3

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 发送到函数中,它可以被多个元素重用。)

于 2013-08-08T12:49:53.620 回答
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;
}
于 2013-08-08T12:47:17.927 回答
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>
于 2013-08-08T13:02:21.673 回答