それマグで!

知識はカップより、マグでゆっくり頂きます。 takuya_1stのブログ

習慣に早くから配慮した者は、 おそらく人生の実りも大きい。

クレジットカードの入力を実現する簡単なブックマークレット

クレジットカードの番号の入力がめんどくさい

クレジットカード番号を入力が4つの「Input」に分割されててイライラしませんか?私はイライラします。

4回もコピーしなおしとかちょっと無理

f:id:takuya_1st:20151208173502p:plain

作った

作った作った。面倒なことは自動化する。

ブックマークに登録(動作サンプル)

- - -

クレジットカードカンタン入力

iterateNext()で

input 書き換えながらiterateNextするとエラーになった。 xpath で検索した結果を使うときは動的にノードの状態が変わるとダメなようだ・・・不便ね。

Uncaught DOMException: Failed to execute 'iterateNext' on 'XPathResult': The document has mutated since the result was returned.

2019-07-06 更新 2019-08-21 更に更新

.//input だと取れすぎるので、Xpathを修正する。

(function() {
    card = []
    card_number = window.prompt("カードナンバー?", "");
    if (card_number.length == 16) {
        card_chars = card_number.split("")
        card.push(card_chars.slice(0, 4).join(""))
        card.push(card_chars.slice(4, 8).join(""))
        card.push(card_chars.slice(8, 12).join(""))
        card.push(card_chars.slice(12, 16).join(""))
    } else if (card_number.length == 19) {
        card = card_number.split("-")
    }
    card_input = []
    var xpath = '//*[count(./input[@type="text"])>=4]//input '
    +' | //*[count(.//input[@maxlength=4])=4]//input'
    +' | //*[count(.//input[@size=4])=4]//input'
    +' | //*[count(./input[contains(translate(./@name,"ABCDEFGHIJKLMNOPQRSTUVWXYZ","abcdefghijklmnopqrstuvwxyz"),"card") and @type="text" ])>=4]/input'
    +' | //*[count(./input[contains(translate(./@id,  "ABCDEFGHIJKLMNOPQRSTUVWXYZ","abcdefghijklmnopqrstuvwxyz"),"card") and @type="text" ])>=4]/input'
    /*ret = document.evaluate("//*[ count(./input) = 4 ]//input", document)*/
    ret = document.evaluate(xpath, document)
    
    while ((input = ret.iterateNext())) {
        card_input.push(input)
    }
    card.forEach( (e,i) => {
      card_input[i].value = card[i]
    });
})()