Force iOS numeric keyboard with custom / currency pattern

后端 未结 4 1727
悲&欢浪女
悲&欢浪女 2020-12-03 03:26

Is there a possiblity to force an iOS-device to show the numeric keyboard while using a custom pattern as input type?

my input pattern:



        
4条回答
  •  借酒劲吻你
    2020-12-03 04:16

    I made this little snippet to achieve what you want and I've tested it on iPhone 5 v7.0.3

    I used e.which to read CharCode entered and then push it into an array (before) which represents digits before decimal mark and another array (after) to move values from (before) array past the decimal mark.

    It might look complicated, due to my humble programming skills.

    1) Code demo - 2) Currency conversion demo

    HTML:

    
    

    JS

    Variables and functions:

    // declare variables
    var i = 0,
        before = [],
        after = [],
        value = [],
        number = '';
    
    // reset all values
    function resetVal() {
        i = 0;
        before = [];
        after = [];
        value = [];
        number = '';
        $("#number").val("");
        $(".amount").html("");
    }
    
    // add thousand separater
    function addComma(num) {
      return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }
    

    Main code:

    // listen to keyup event
    $("#number").on("keyup", function (e, v) {
    
        // accept numbers only (0-9)
        if ((e.which >= 48) && (e.which <= 57)) {
    
            // convert CharCode into a number   
            number = String.fromCharCode(e.which);
    
            // hide value in input
            $(this).val("");
    
            // main array which holds all numbers
            value.push(number);
    
            // array of numbers before decimal mark
            before.push(value[i]);
    
            // move numbers past decimal mark
            if (i > 1) {
                after.push(value[i - 2]);
                before.splice(0, 1);
            }
    
            // final value
            var val_final = after.join("") + "." + before.join("");
    
            // show value separated by comma(s)
            $(this).val(addComma(val_final));
    
            // update counter
            i++;
    
            // for demo
            $(".amount").html(" " + $(this).val());
    
        } else {
    
            // reset values
            resetVal();
        }
    });
    

    Reset:

    // clear arrays once clear btn is pressed
    $(".ui-input-text .ui-input-clear").on("click", function () {
        resetVal();
    });
    

    Result:

    enter image description here

提交回复
热议问题