Событие Stop Blur при нажатии ссылки

Question

Я пытаюсь скрыть ssn или другую конфиденциальную информацию в текстовом поле с использованием событий JQuery.

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/

Answer 2

Попробуйте этот код, который будет остановить размывание событие нажмите на ссылку.

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

Вы можете проверить, если #lnk является сосредоточенным элементом перед запуском hide(), когда событие происходит размытие.

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

Answer 4

Попробуйте

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

<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>