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

Question

我希望通過顯示一些特殊字符來隱藏文本字段條目，但在內部訪問該值時，我希望得到用戶輸入的條目。

它必須是類型=“文本”之類的

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

后退按鈕用於刪除字符的版本和提交的結果反映了刪除：

    <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