Question

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

 $('#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

试试这个

＆＃13;

$('#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(function(e) {
   try {
     if (e.relatedTarget.id != 'lnk') {
       hide();
     }
   } catch (error) {
     hide();
   }
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="mask-wrapper">
   <input id="txtMasked" type="Password" value="000-30-0009">
   <a id="lnk" class="linkbutton btn-link" ToolTip="Show" href="#" >Show</a>
</span>

＆＃13;

Answer 2

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

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

改变＆＃39; lnk＆＃39;点击事件到以下。

$('#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/

Answer 3

尝试使用此代码停止点击链接中的模糊事件。

$('#lnk').click(function (e) {
     e.stopImmediatePropagation();
     $(this).off("blur");
    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;
})

Answer 4

当模糊事件发生时，您可以在触发hide()之前检查#lnk是否是焦点元素。

$('#txtMasked').blur(function() {
        if (!$("#lnk")==$(document.activeElement)) {
            hide();
        }
    });

单击链接时停止模糊事件

4 个答案: