javascript - 单击链接时停止模糊事件

Question

我正在尝试使用 JQuery 事件在文本框中隐藏 ssn 或其他敏感信息。

DEMO

 $('#txtMasked').keyup(function (e) {
    e.preventDefault();
    var val = this.value.replace(/\D/g, '');
    var newVal = '';
    if (val.length > 4) {
        this.value = val;
    }
    if ((val.length > 3) && (val.length < 6)) {
        newVal += val.substr(0, 3) + '-';
        val = val.substr(3);
    }
    if (val.length > 5) {
        newVal += val.substr(0, 3) + '-';
        newVal += val.substr(3, 2) + '-';
        val = val.substr(5);
    }
    newVal += val;
    this.value = newVal;
});

$('#lnk').click(function (e) {
    if ($('#txtMasked').attr('type') === 'password') {

        $('#txtMasked').attr('type', 'text');
        $(this).text('Hide');
        $(this).prop('title', 'Hide');
    } else {
        $('#txtMasked').attr('type', 'password');
        $(this).text('Show');
        $(this).prop('title', 'Show');
    }
    return false;
})

var show = function (ev) {
    $('#txtMasked').attr('type', 'text');
    $('#lnk').text('Hide');
    $('#lnk').prop('title', 'Hide');
},
     hide = function (ev) {
         $('#txtMasked').attr('type', 'password');
         $('#lnk').text('Show');
         $('#lnk').prop('title', 'Show');
     };

$('#txtMasked').focus(show);
$('#txtMasked').blur(hide);

当焦点事件被触发时，文本被取消屏蔽，并且可以通过触发模糊或链接事件来屏蔽回来。

当触发焦点并单击链接时，也会触发模糊。结果，它混淆了链接点击事件，因此文本永远不会被屏蔽。

我在互联网上搜索过，但找不到阻止这两个事件同时触发的方法。

我试过了 this ，但它在我的情况下不起作用。

请问有人能帮忙吗？

感谢大家的帮助

Answer 1

将以下代码片段添加到您的脚本中。

 var is_blur=false;
 $(document).click(function(e){
    if(e.target.id!='lnk'){
      is_blur=false; 
    }
 });

将“lnk”点击事件更改为以下。

$('#lnk').click(function (e) {
    if(is_blur){
      is_blur=false;  
      return;
    }                

    if ($('#txtMasked').attr('type') === 'password') {
        $('#txtMasked').attr('type', 'text');
        $(this).text('Hide');
        $(this).prop('title', 'Hide');
    } else {
        $('#txtMasked').attr('type', 'password');
        $(this).text('Show');
        $(this).prop('title', 'Show');
    }
    return false;
})

将隐藏功能更改为跟随。

hide = function (ev) {
         $('#txtMasked').attr('type', 'password');
         $('#lnk').text('Show');
         $('#lnk').prop('title', 'Show');
         is_blur=true;
     };

希望这些对你有帮助。

https://jsfiddle.net/af4wqmuy/8/