Question

我目前有一些用于电话号码验证的js，它在输入字段中使用内联事件侦听器。我需要更改此示例，以便不使用内联附加事件侦听器，而是将jQuery中的DOM元素作为目标并添加事件侦听器。这是我到目前为止的一个有效例子：http://jsfiddle.net/yVdgL/21/

window.mask = function (e,f){
    var len = f.value.length;
    var key = whichKey(e);
    if((key>=47 && key<=58) || (key>=96 && key<=105))
    {
        if( len==1 )f.value='('+f.value
        else if(len==4 )f.value=f.value+')'
        else if(len==8 )f.value=f.value+'-'
        else f.value=f.value;
    }
}

function whichKey(e) {
    var code;
    if (!e) var e = window.event;
    if (e.keyCode) code = e.keyCode;
    else if (e.which) code = e.which;
    return code
}

和

<input type="text" name="phone" id="phone" onkeydown="mask(event,this)" onkeyup="mask(event,this)" maxlength="13" />

我尝试this但无法实现我需要的功能。

Answer 1

我已经更新了jsfiddle示例： -

jQuery(document).ready(function(){
    jQuery('#edit-phone1').keyup(function(event){
        mask(event,this);
    });
    jQuery('#edit-phone1').keydown(function(event){
        mask(event,this);
    });
});

点击此处查看工作示例： - http://jsfiddle.net/yVdgL/38/

或者您可以尝试： -

$(document).ready(function() {
    $('#edit-phone1').on("keyup keydown", function(e) {
        mask(e, this);
    });

});

链接是： - http://jsfiddle.net/yVdgL/56/

Answer 2

在较早的HTML5之前的浏览器中，$("#phone").keyup( function )或keydown绝对是您正在寻找的。

在HTML5中有一个新事件，“输入”，其行为与您认为“改变”应该表现完全相同 - 因为只要按下一个键将信息输入到表单中，它就会触发。 $("#phone").bind('input',function);

Answer 3

您从未定义过活动。

jQuery('#edit-phone1').keyup(function(){
    jQuery('#edit-phone1').mask(event,this);  //<-- what is event?
});

只需添加

第二个问题是你正在将window.mask视为一个jQuery插件而且它不是一个插件。

jQuery('#edit-phone1').keyup(function(event){  //<-- add event here
    mask(event,this);  
});

JS onkeydown / onkeyup - 转换为jQuery keydown / keyup

3 个答案: