【问题标题】:Increase/decrease textfield value with javascript使用javascript增加/减少文本字段值
【发布时间】:2011-03-11 21:37:21
【问题描述】:

我在编写将执行以下操作的 javascript 时遇到问题:

点击图片时增加/减少文本框内的数字。 为该文本框设置一个限制(不低于零,不高于 x)

请知道我在同一页面中有很多文本框,那么如何解决这个问题?

【问题讨论】:

  • 你在使用任何类型的库吗?
  • 我尝试了 jquery,但我正在寻找更简单的方法。

标签: javascript image textfield


【解决方案1】:

您不需要(也不应该)为每个图像和输入字段设置 ID。不过,您需要为每个输入字段设置名称属性(以便您的服务器代码可以区分它们 - 但不适用于 JS)。

如果每一行的“添加”部分如下所示:

<div>
  <img src='minus.png' onclick="increment(this.parentNode.getElementsByTagName('input')[0]);" />
  <input type='text' name='product_1010101011' />
  <img src='plus.png' onclick="decrement(this.parentNode.getElementsByTagName('input')[0]);" />
</div>

使用这个javascript:

function increment(myInput) {
  // use Mike Samuel's code here
  myInput.value = (+myInput.value + 1) || 0;
}
function decrement(myInput) {
  // use Mike Samuel's code here
  myInput.value = (myInput.value - 1) || 0;
}

【讨论】:

  • 我正在寻找的答案。非常感谢!
  • 要限制它,使用Math.max(0, ...),所以function decrement(myInput) { myInput.value = Math.max(0, (myInput.value - 1) || 0); }。欢呼
【解决方案2】:

我认为这应该让你继续前进:

<form>
    <input type="button" id="minus" value="-" 
    onClick="textb.value = (textb.value-1)">
    <input type="text" id="textb" name="name" value="1" />
    <input type="button" value="+" 
    onClick="textb.value = (+textb.value+1)">
</form>

现场示例here

【讨论】:

  • 我可以帮你,但现在不行。我一小时后回来!
【解决方案3】:

增加

myInput.value = (+myInput.value + 1) || 0;

递减

myInput.value = (myInput.value - 1) || 0;

|| 0 会将任何不解析为整数的值重置为默认值 0。

【讨论】:

    猜你喜欢
    • 2016-11-09
    • 2020-10-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-11-21
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多