Javascriptボタン、onclick関数とアライメント

Question

私のlaravelサイトに量を減らす/増やすためのjavascript要素を作成しようとしています。私は数量フィールドが自動的に入力インスタンスのすべてで '0'を入力し、明らかに増減ボタンを追加または減算したい。

しかし、ページの読み込み時に入力を0にすることはできません。また、入力には「追加」ボタンを押し下げる何かがあるようです。

は、ここに私のソースコードです：

<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> 

buttoneが押下されていることを（私はよく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属性が実際に検索値を代入しますvalue='0'またはplaceholder='0'

を使用できますそれを実際に割り当てずに値を表示するだけです。例hereを参照してください。