CODEWITHSUNDEEP
javascriptphpjquery
Steve
Steve

Reputation: 2588

How to display special characters in input element text field but still preserve the value in JQuery

I am hoping to hide the text field entries by showing some special character, but internally when I access the value, I want to get the entry as entered by the user.

It has to be a type="text" like

<input type="text" id="mytext" value="" size="60" maxlength="128" class="form-text mck-input-text required" />

Thanks a lot.

Upvotes: 3

Views: 3347

Answers (1)

Steve
Steve

Reputation: 818

This is not a good idea if there is anything secure about what is typed.

A password input could be the better option.

If you want random characters displayed, you would have to do that in the script and assign the value to the obscured variable instead of 'x'. This version, for clarity, doesn't handle other key events so you can't delete any letters typed but it is just to give a few bits of usable code you could develop. The second version below allows the use of the "back" button to delete characters.

The textbox text is made white when you type into it - this will need to be made to match whatever background you use and it is still there briefly as it is typed, just not visible until it is replaced.

In your PHP page head:

<script language="javascript">
var obscured = '';
var real_value = '';
function obscure_it(real_value,ev){
        document.getElementById('text_input').style.color = '#fff';
        document.getElementById('real_text_hidden_input').value =         document.getElementById('real_text_hidden_input').value+real_value.substr(real_value.length - 1);
        obscured = window.obscured+'x'; // or + a randomly generated character
        window.obscured = obscured;
        document.getElementById('text_input').value = obscured;
        document.getElementById('text_input').style.color = '#000';
}

function white_it(){
        document.getElementById('text_input').style.color = '#fff';
}

</script>

In your form, which would have method="post":

<input type="hidden" name="real_text_hidden_input" id="real_text_hidden_input" value="" />

<input type="text" name="text_input" id="text_input" onKeyPress="white_it()" onKeyUp="obscure_it(this.value,window.event);" />

To get back the real letters typed

<?php echo htmlspecialchars($_POST['real_text_hidden_input']); ?>

A version on which the back button works to delete characters and the result submitted reflects the deletions:

    <script language="javascript">
    var ev = '';
    var obscured = '';
    var real_value = '';
    function obscure_it(real_value,ev){
            document.getElementById('text_input').style.color = '#fff';
            document.getElementById('real_text_hidden_input').value = document.getElementById('real_text_hidden_input').value+real_value.substr(real_value.length - 1);

                if(ev.keyCode != 8){ 
                obscured = window.obscured+'x';
                window.obscured = obscured;
                document.getElementById('text_input').value = obscured;
                }else{
                document.getElementById('real_text_hidden_input').value = document.getElementById('real_text_hidden_input').value.substr(0,  (document.getElementById('real_text_hidden_input').value.length-2));
                }
            document.getElementById('text_input').style.color = '#000';
    }

    function white_it(){
           document.getElementById('text_input').style.color = '#fff';
    }
    </script>

And the form:

     <form name="form" id="form" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']) ?>" method="post">  
         <input type="hidden" name="real_text_hidden_input" id="real_text_hidden_input" value="" />
         <input type="text" name="text_input" id="text_input" onKeyPress="white_it()" onKeyUp="obscure_it(this.value, event);" /> 
         <input type="submit" name="sbutton" id="sbutton" value="Submit" /><br />
     </form>
     <a href="<?php echo htmlspecialchars($_SERVER['REQUEST_URI']); ?>">Click to start a new submission</a>
     <br /><?php echo htmlspecialchars($_POST['real_text_hidden_input']); ?>

This might be a useful reference for keyboard event handling: http://javascript.info/tutorial/keyboard-events

Upvotes: 1

Related Questions