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

Question

我希望通过显示一些特殊字符来隐藏文本字段条目，但在内部访问该值时，我想获取用户输入的条目。

必须是 type="text"这样的

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

非常感谢。

Answer 1

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

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

如果您想要显示随机字符，您必须在脚本中执行此操作并将值分配给 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']); ?>

后退按钮用于删除字符并且提交的结果反射(reflect)删除的版本:

    <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