在处理Web表单时加密输入的文本并对其进行解密

I want to have a text box on a web form with its own encryption and decryption process. The user enters stuff like: "gwkki", meaning "hello".

The encryption key here is each letter on the keyboard next to the correct letter:

h turns to g
e turns to w
l turns to k
o turns to i

"hello" turns to "gwkki"

I want, as soon as the user types in "gwkki" in the textbox, the textbox to display "hello". Can I write a script to monitor each key pressed and replace each letter using this encoding scheme?

This can be done using pure js or js and php.

You can use track the changes made to the field using the onChange event handler in html :

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

and then you can write a simple function like :

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

Here is a link that might help you write the encoding/decoding part : http://www.w3schools.com/jsref/jsref_replace.asp

You can. When the user focuses on that input (you can watch this with the focus and blur events). When a user focuses on that input, listen for a keypress with the keypress event and you can grab the value of the last letter clicked and assuming it's not the delete key, encode it properly.

Some pseudo-code with jQuery that handles changing the last character. Might not be exactly right:

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);
});