スライダーの下に、スライダーの値。スライダーを動かすと、入力に通貨形式の数値が表示されます。また、ユーザーが図を入力できるようにし、それに応じてスライダーを調整します。
以外はすべて完全に動作します enter キーを使用して、フィールドの手動変更をアクティブにすることはできません。
次のHTMLは、このようなスライダーの下にある入力を示しています。
<table class="transaction-calculations">
<tbody>
<tr>
<td class="invoice-slider invoice">
<input type="range" name="avg_tran_slider" class="wpcf7-form-control wpcf7-range form-control" id="avg_tran_slider" min="0" max="50000" value="150"><br/>
</td>
</tr>
<tr>
<td class="invoice-slider">
<input type="text" id="avg_tran" class="slider-calculator-figure" value="$150.00"/>
</td>
</tr>
</tbody>
</table>
私はこのコンテンツをJSでこのようにフォーマットします：
/** select input contents when activated **/
jQuery("#avg_tran").focus(function() {
jQuery(this).select();
});
/** set slider position from manually entered value **/
jQuery("#avg_tran").blur(function() {
monthly_invoice_value = jQuery(this).val();
monthly_invoice_value = parseFloat(monthly_invoice_value.replace(/[^0-9-.]/g, ""));
if(isNaN(monthly_invoice_value)) {
jQuery("#avg_tran").val("$0.00");
jQuery("#avg_tran_slider").val(0);
} else {
if(monthly_invoice_value > 50000) {
jQuery("#avg_tran").val("$50,000.00");
jQuery("#avg_tran_slider").val(50000);
} else {
jQuery("#avg_tran").val(formatMoney(monthly_invoice_value));
jQuery("#avg_tran_slider").val(monthly_invoice_value);
}
calculateCosts();
}
});
/** set input value from slider change **/
jQuery("#avg_tran_slider").on("change mousemove", function() {
monthly_invoice_value = jQuery(this).val();
jQuery("#avg_tran").val(formatMoney(monthly_invoice_value));
calculateCosts();
});
あなたが打つことができないこと以外はすべて完璧に機能します enter フィールド値を手動で変更すると、フィールドの「焦点がぼけて」アクティブ化されないため blur コード。
私には何が欠けていますか？ありがとう！
回答：
回答№1は1あなたはその声を聞くことができます enter コードを実行したい場合は、入力にキーを押します。
jQuery("#avg_tran").keypress(function(event) {
var code = event.keyCode || event.which;
// 13 = key code of enter
if (code == 13) {
// Do something. Probably trigger the blur event in your case
jQuery("#avg_tran").blur();
}
});
回答№2の場合-2
それを試してみてください ：
jQuery("#avg_tran").keypress(function(event) {
var code = event.keyCode || event.which;
// 13 = key code of enter
if (code == 13) {
// Do something. Probably trigger the blur event in your case
jQuery("#avg_tran_slider").val(jQuery("#avg_tran").val());
jQuery("#avg_tran").blur();
}
});