Question

我试图在我的laravel网站中创建一个javascript元素来减少/增加数量按钮。我希望数量字段自动填充＆＃39; 0＆＃39; 0在所有输入实例中，然后显然有增加和减少按钮加或减。

但是，我无法在页面加载时获得填充0的输入，而且，输入似乎还有一些上面的内容可以推动添加＆＃39;按下按钮。

这是我的源代码：

<div>
<button class="remove-button md-btn" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">remove</i></button>
<input type="text" class="md-input" id="{{ $quantity_id }}" name="count" onClick="this.setSelectionRange(0, this.value.length);" style="width: 33%; min-width: 0; float: left; margin: 0; text-align: center; height: 30px;"  />
<button class="add-button md-btn md-btn-success"  style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">add</i></button>
</div>

是否有一个明显的原因（我不熟悉JS）那个丁酮被推下来了，我的领域没有填充0或增加/减少？

Answer 1

您需要为所有按钮添加以下样式：

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

这将确保填充不会影响按钮的宽度，因此width: 33%;实际上不会变成width: 33% + 14px;等。

要为输入提供默认值，您可以使用value='0'或placeholder='0'

value属性将分配实际可检索值，而占位符仅显示值而不实际分配它。请参阅示例here。

Javascript按钮，onclick功能和对齐方式

1 个答案: