如何在输入元素文本字段中显示特殊字符,但仍保留JQuery中的值
How to display special characters in input element text field but still preserve the value in JQuery
我希望通过显示一些特殊字符来隐藏文本字段条目,但在内部访问值时,我希望获得用户输入的条目。
它必须是类似的type="text"
<input type="text" id="mytext" value="" size="60" maxlength="128" class="form-text mck-input-text required" />
非常感谢。
如果键入的内容有任何安全性,那么这不是一个好主意。
输入密码可能是更好的选择。
如果希望显示随机字符,则必须在脚本中执行此操作,并将值分配给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
相关文章:
- 如何使用jquery强制一个单词更改大小写等以保留品牌
- Jquery html() 和保留元素名称
- 如何在使用JavaScript或jQuery刷新父页面后保留iframe-src
- 保留 JQuery Vars 用于另一个函数(全局变量?)
- 数据是否等于保留或无法被 jQuery/Sizzle 选择
- 将参数传递给 jQuery .click WHILE 保留事件参数
- jQuery blimp文件上传-上传后保留选择图像行
- 在可排序的JQuery UI列表中至少保留一个项目
- Jquery:如何在保留文本的同时打开字符串的所有span标记
- jQuery深度扩展并保留所有属性
- 保留当前点击事件jquery
- 返回浏览器时保留jQuery addClass
- asp.net Jquery.ajax保留JSON.分析意外字符错误
- 保留此内容并保留 jQuery 上下文
- 如何在输入元素文本字段中显示特殊字符,但仍保留JQuery中的值
- 使用模板,但保留jquery绑定
- 在移动中添加按钮时保留jQuery功能
- 保留jquery粘贴格式
- 保留jquery选项的值,保存用户的值
- 使用requireJS优化器为highcharts保留jQuery依赖