Заменить / Маскировать текст в определенной позиции в поле textBox, используя Javascript

Question

Как заменить текст, введенный в текстовое поле, на * после ввода следующего символа с помощью Java Script?

Я использую тег inputSecret дляэто текстовое поле, но оно сразу скрывает весь контент, когда я набираю.

Это то, что я делаю сейчас: (что неправильно. Можем ли мы настроить этот тег inputSecret?)

<h:inputSecret maxlength="6" value="#{userBean.field}" />  

Требования:

• Оно должно принимать фактическое значение в свойстве управляемого компонента, но маскировать его с помощью "*" только в пользовательском интерфейсе.
• Следует замаскировать текст в определенной позиции.Например, первые 2 и последние 2 символа замаскированы, но средние 2 символа отображаются как **34**
• Маскирование должно начинаться только с момента ввода второго символа.Допустим, это значение, которое я ввожу 123456.
  • Первый шаг: 1
  • Второй шаг: *2
  • Третий шаг: **3
  • Четвертый шаг: **34 (3-й и 4-й символы не должны маскироваться)
  • Пятый шаг: **345
  • Шестой шаг: **34*6
  • Седьмой шаг: **34** (к тому времени, как я закончу вводить в этом текстовом поле)

Есть ли какие-либо указания о том, как это сделать?

PS: Это поле может быть буквенно-цифровым.Я использовал числовые значения только в качестве примера.

Answer 1

Если мы закрываем глаза и игнорируем проблемы безопасности, есть способ сделать это только с помощью JavaScript.

IDEA

Основная идея взята из этого принятого ответа .Зная, что <h:inputSecret ../> фактически отображается как <input type="password".../>, мы можем использовать java-скрипт для манипулирования им следующим образом:

• , когда страница готова в браузере, создать скрытую input с тем же name атрибут как исходный, чтобы JSF не мог видеть никакой разницы,
• изменить тип оригинала input с пароль на текст ,
• использовать java-скрипт для перехвата типизированных символов и использовать исходное поле для рендеринга пользовательского интерфейса и скрытое поле для хранения значения, которое будет передано компоненту поддержки

IMPLEMENTATION

xhtml

<h:form class="form">
    <h:inputSecret maxlength="6" value="#{userBean.field}" class="pass"/>
</h:form>

javascript (с использованием библиотеки jQuery)

//creating mask from real value according to required steps
function createMask(value) {
    var mask = "";
    var valueLen = value.length;
    if (valueLen === 1) {
        mask = value;
    } else if (valueLen === 2) {
        mask = "*" + value.substring(1, 2);
    } else if (valueLen === 3) {
        mask = "**" + value.substring(2, 3);
    } else if (valueLen === 4) {
        mask = "**" + value.substring(2, 4);
    } else if (valueLen === 5) {
        mask = "**" + value.substring(2, 5);
    } else if (valueLen === 6) {
        mask = "**" + value.substring(2, 4) + "**";
    }
    //if maxLength>6 then add more else ifs
    return mask;
}

$(document).ready(function () {
    var timer = "";
    //add hidden field to hold actual typed value
    $(".form").append($('<input type="hidden" class="hidpassw" />'));
    //give hidden field the same name as original
    $(".hidpassw").attr("name", $(".pass").attr("name"));
    //change original type from password to text and remove name property
    $(".pass").attr("type", "text").removeAttr("name");
    //get maxlength attr value of original field
    var maxLength = parseInt($(".pass").attr("maxlength"));

    //alphanumeric chars are added to value
    $("body").on("keypress", ".pass", function (e) {
        var code = e.which;
        var length = $(".hidpassw").val().length;
        //modify regex if it doesnt fit your 'alphanumeric' definition
        if (/^[a-zA-Z0-9]$/i.test(String.fromCharCode(code))) {
            //check if maxLength is not reached
            if (length < maxLength) {
                //if length is less them maxLength then add typed alphanumeric char to hidden value
                var character = String.fromCharCode(code);
                $(".hidpassw").val($(".hidpassw").val() + character);
            }
        }
    });

    //special case for backspace
    $("body").on("keydown", ".pass", function (e) {
        var code = e.which;
        var length = $(".hidpassw").val().length;
        if (code === 8) {
            e.preventDefault();
            if (length > 0) {
                clearTimeout(timer);
                $(".hidpassw").val($(".hidpassw").val().substring(0, length - 1));
                $(".pass").val(createMask($(".hidpassw").val()));
            }
        }
    });


    $("body").on("keyup", ".pass", function (e) {
        var length = $(".hidpassw").val().length;
        if (length <= maxLength) {
            clearTimeout(timer);
            //show last typed char for 100ms and then mask it
            timer = setTimeout(function () {
                $(".pass").val(createMask($(".hidpassw").val()));
            }, 100);
        }
    });
});