Блог

Я хочу иметь текстовое поле в веб-форме с собственным процессом шифрования и дешифрования. Пользователь вводит что-то вроде: «gwkki», что означает «привет».

Ключом шифрования здесь является каждая буква на клавиатуре рядом с правильной буквой:

h превращается в g
e превращается в w
l превращается в k
o превращается в i

«привет» превращается в «gwkki»

Я хочу, чтобы, как только пользователь вводит «gwkki» в текстовое поле, в текстовом поле отображалось «привет». Могу ли я написать скрипт для отслеживания каждой нажатой клавиши и замены каждой буквы, используя эту схему кодирования?

Это можно сделать с помощью чистого js или js и php.

Вы можете использовать отслеживание изменений, внесенных в поле, с помощью обработчика событий onChange в html :

<input type="text" id="fieldName"
onchange="encode(this.id)">

и тогда вы можете написать простую функцию, например :

 <script type="text/javascript">
function upperCase(x)
{
var y=document.getElementById(x).value

//HERE YOU DECODE/ENDCODE the variable


//AND THEN DISPLAY IT WHERE EVER YOU WANT
document.getElementById(**THIS IS THE ID OF WHERE YOU WANNA DISPLAY THE VALUE**).value=y
}
</script>
  

Вот ссылка, которая может помочь вам написать часть кодирования / декодирования: http://www.w3schools.com/jsref/jsref_replace.asp

Вы можете. Когда пользователь фокусируется на этом вводе (вы можете наблюдать это с focus blur помощью событий и). Когда пользователь сосредотачивается на этом вводе, прослушайте нажатие клавиши с keypress событием, и вы можете получить значение последней нажатой буквы и, предполагая, что это не клавиша удаления, закодируйте ее правильно.

Некоторый псевдокод с jQuery, который обрабатывает изменение последнего символа. Может быть не совсем правильно:

 var listenForKeyPress = function (e) {
  if ($.inArray(e.keyCode, ARRAY_OF_CHARS_TO_ENCODE)) {
    var el = $(this),
        value = el.val();

    // Set the value after we encode it
    el.val(value.slice(0, value.length - 2)   encode(value[value.length - 1]);
  }
};

$('#my-input').focus(function () {
  $(this).bind('keypress', listenForKeyPress);
});

$('#my-input').blur(function () {
  $(this).unbind('keypress', listenForKeyPress);
});