1

Добрый день.

Подскажите пожалуйста как лучше реализовать кнопку "подглядывания" введенных символов пароля.

Пытаюсь сделать используя эту рекомендацию, но почему то если запихнуть в <span> textBox, то при нажатии на глаз ничего не происходит.

<span class="passEye">
     <asp:TextBox ID="tbPassword" runat="server" AutoCompleteType="Disabled" TextMode="Password" MaxLength="30" Width="152" TabIndex="2" />
</span>

А если реализовать так :

<asp:TextBox ID="tbPassword" runat="server" AutoCompleteType="Disabled" TextMode="Password" MaxLength="30" Width="152" TabIndex="2" />
<div onclick="passEye();">click</div>
<script type="text/javascript">
    function passEye() {
        if (document.getElementById('<%= tbPassword.ClientID %>').type == 'password')
            document.getElementById('<%= tbPassword.ClientID %>').type = 'test';
        else document.getElementById('<%= tbPassword.ClientID %>').type = 'password';
    }
</script>

То такая реализация не работает в IE.

Методами тыка было реализован скрипт:

<div onclick="passEye(document.getElementById();">click</div>
            
<script type="text/javascript">
    function passEye(document.getElementById('<%= tbPassword.ClientID %>')) {
    var marker = $('<span />').insertBefore(document.getElementById('<%= tbPassword.ClientID %>'));
    if (document.getElementById('<%= tbPassword.ClientID %>').type == 'password') {
    $(document.getElementById('<%= tbPassword.ClientID %>')).detach().attr('type', 'text').insertAfter(marker).focus();
    marker.remove();
    } else {
    $(document.getElementById('<%= tbPassword.ClientID %>')).detach().attr('type', 'password').insertAfter(marker).focus();
    marker.remove();
    }
}
</script>

Теперь у меня есть скрипт, который реализовывает моргание глаза :

$(function () {
    //PassEye by SaD([email protected])

    $(".passEye").append('<span class="eye" title="Показать/скрыть пароль"></span>');

    $(".passEye .eye").click(function () {
        $(this).toggleClass('openEye');        
    });   
});

И мой скрипт, который реализовывает преобразование пароля.

Вопрос: Как мне их соеденить? Как мне перенести мой скрипт, так, чтобы при нажатии на глаз выполнялось преоброзование пароля?

2
  • Возможно, вам поможет эта статья: wsnippets.com/instant-show-hide-password-jquery Посмотреть демо можно тут: wsnippets.com/demo/bootstrap-show-hide-password
    – VenZell
    13 мар 2014 в 12:05
  • Там чтобы скачать библиотеку, нужно подписаться на рассылку автора. но мейл не аццептится... Я использую что-то похожее по реализации в приведенной ссылке вверху, но почему-то оно не работает(((
    – Telsystems
    14 мар 2014 в 8:50

1 ответ 1

0

Вот так можно реализовать кнопку "подглядывания"

.e-input-eye:before {
  content: '\e345';
  font-family: e-icons;
  font-size: 13px;
  color: #8A2336 !important;
}

.e-input-eye:active:before {
  content: '\e721';
}
<link href="https://cdn.syncfusion.com/ej2/20.4.48/ej2-icons/styles/bootstrap5.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/20.4.48/ej2-icons/styles/material.css" rel="stylesheet" />

<div class="input-group mb-2">
  <div class="input-group-append">
    <span class="input-group-text"><i class="fas fa-key"></i></span>
  </div>
  <input type="@typeParolKnopka" name="" class="form-control input_pass" @bind-value="userPassword" placeholder="введите пароль">
  <span class='e-icons e-input-eye input-group-text' @onclick="ShowPasswordFunction"></span>
</div>

в фрагмент кода для демонстрации C# не вставишь, поэтому ниже код логики для самой кнопки, чтоб показать или скрыть символы пароля

public string typeParolKnopka { get; set; } = "password";
public void ShowPasswordFunction()
{
    if (this.typeParolKnopka == "password")
    {
        this.typeParolKnopka = "text";
    }
    else
    {
        this.typeParolKnopka = "password";
    }
}

а вот в этом вопросе я пытаюсь подправить дизайн глаза, чтоб иконка менялась, когда пароль показывает/прячет == открытый/закрытый

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.