MTAppTaxAssist

数値欄の直後に「税込み」「税抜き」ボタンを付与し、税率に応じて金額を変換して書き戻す jQuery プラグイン。

数値入力欄の直後に「税込み」「税抜き」の計算ボタンと「リセット」ボタンを付与する jQuery プラグインです。計算ボタンを押すと、欄に入力されている金額を税率に応じて税込み価格・税抜き価格へ変換して書き戻し、リセットボタンを押すと計算前に入力していた数値へ戻します。

構文

$(selector).MTAppTaxAssist(options);

$.fn プラグイン($(selector).MTAppTaxAssist(...))です。対象要素(this)を返すのでチェーンできます。

パラメータ

options {Object} — 省略可。以下のプロパティを持ちます。

プロパティ既定値説明
ratenumber0.05消費税率(例: 10% のときは 0.10
roundingstringfloor端数処理。floor(切り捨て)/ceil(切り上げ)/round(四捨五入)。未対応の値を渡すと丸めを行わない
fractionstring非推奨: rounding のエイリアス。rounding 未指定時のみ採用

戻り値

{jQuery} — 対象要素(チェーン可能)。

保存される値

入力欄に表示されている数値文字列がそのまま保存されます。「税込み」「税抜き」ボタンを押すと欄の値が計算後の数値(端数処理済み)に置き換わり、それが保存対象になります。「リセット」を押すと計算前に手入力した値へ戻ります。

使用例

税率 10%・切り捨て

$('#customfield_price').MTAppTaxAssist({ rate: 0.10, rounding: 'floor' });

user.js での記述例

user.js(「デザイン → user.js を編集」)に書く場合は、mtappVars.screen_id で画面を判定して呼び出します。

(function ($) {
    if (typeof mtappVars !== 'object') return;
    if (mtappVars.screen_id === 'edit-entry') {
        $('#customfield_price').MTAppTaxAssist({ rate: 0.10, rounding: 'floor' });
    }
})(jQuery);

四捨五入

$('#customfield_price').MTAppTaxAssist({ rate: 0.10, rounding: 'round' });

既定(税率 5%・切り捨て)

$('#customfield_price').MTAppTaxAssist();

生成される HTML

対象要素の直後に、ボタンが 3 つ(税込み・税抜き・リセットの順)追加されます。クラスは taxes_includedafter_taxesmtapp-tax-reset(いずれも管理画面の button スタイルを併用)。スタイルシートで入力欄との縦の間隔(margin-top)だけを足し、左端揃え・ボタン間の横の間隔は管理画面標準の button スタイルに従います(MTAppDateAssist のボタンと同じ見た目)。

<input type="text" id="customfield_price" class="text">
<span class="taxes_included button" title="金額から税込み価格を計算する">税込み</span>
<span class="after_taxes button" title="金額から税抜き価格を計算する">税抜き</span>
<span class="mtapp-tax-reset button" title="計算前の数値に戻す">リセット</span>

計算ボタンを一度クリックすると、そのボタンに clicked クラスが付きます(リセットを押すと解除されます)。

補足

  • 税込み ボタンは欄の値を 値 × (1 + rate)税抜き ボタンは 値 ÷ (1 + rate) に変換し、rounding で丸めて書き戻します。
  • リセット ボタンは、計算前に入力していた数値へ戻します。戻し先は「ユーザーが最後に手入力した値」です。プラグインによる .val() 更新は input/change を発火しないため、計算ボタンを何度押しても戻し先は変わらず、押し間違えても元の入力値へ確実に戻せます。手入力で値を変えた場合は、その新しい値が以後の戻し先になります。
  • 値は Number() で数値化します。数値に変換できない入力(空欄など)は NaN になり、丸め後も NaN が書き戻されます。
  • 丸めは JavaScript の浮動小数点演算に基づきます。たとえば税率 10% で 1100 に「税抜き」を適用すると、1100 ÷ 1.1 が浮動小数点上 999.999… になり、切り捨てで 999 になります(誤差が問題になる用途では端数処理の指定とあわせて運用側で確認してください)。
  • クリックハンドラは click.mtapptaxassist 名前空間で、ボタン生成時にクロージャ参照で対象欄に紐づきます。そのため後続メソッド(MTAppRemoveVal など)が入力欄をラップしても正しく動作します。
  • 非推奨エイリアス fraction は、rounding が未指定のときだけ採用されます。新規実装では rounding を使ってください。

関連

  • MTAppNumChecker — 数値欄の全角→半角変換と範囲(最小・最大)チェックを行う。
  • MTAppMaxLength — テキスト欄の最大文字数チェックと残り文字数カウンタを表示する。
  • MTAppDateAssist — 日付欄の入力補助を行う。