如何在输入元素文本字段中显示特殊字符，但仍保留JQuery中的值

如果键入的内容有任何安全性，那么这不是一个好主意。

输入密码可能是更好的选择。

如果希望显示随机字符，则必须在脚本中执行此操作，并将值分配给obscured变量，而不是"x"。为了清楚起见，这个版本不处理其他关键事件，所以你不能删除任何键入的字母，但它只是提供一些你可以开发的可用代码。下面的第二个版本允许使用"后退"按钮删除字符。

当你在文本框中键入时，文本框文本会变为白色——这需要与你使用的任何背景相匹配，并且在键入时它仍然短暂地存在，只是在被替换之前不可见。

在您的PHP页面标题中：

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

在你的表格中，会有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);" /> 

要取回键入的真实信件

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

后退按钮用于删除字符的版本，提交的结果反映了删除情况：

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

形式：

     <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']); ?>

这可能是键盘事件处理的有用参考：http://javascript.info/tutorial/keyboard-events