更改密码符号并使用键盘按钮删除

时间:2016-09-02 03:35:22

标签: jquery html

我尝试将密码输入符号更改为其他符号。 我成功地做到了,但要清理这个领域。我应该在网站上使用我的清除按钮,而不是删除键盘上的键。 我想修复它,以便通过单击键盘上的删除来删除我的隐藏输入值。不清楚按钮。 这是我在codepen上的代码:http://codepen.io/abomostafacobra/pen/QKWgJE

<h1>Changing Password Security Symbol</h1>
<input type="text"/>
<input type="hidden"/>
<button class="post">Post</button>
<button class="clear">Clear</button>
<span>Whin you write a wrong password Clear it by clicking Clear botton here not by delete key in your keyboard</span>
<div></div>

jquery

$('input').on('keyup',function(){
var string =
    $('input[type=text]').val();

$('input[type=hidden]')
    .val(
    $('input[type=hidden]').val() + 
    string.charAt(string.length - 1)
);
$('input[type=text]')
    .val(
        $('input[type=text]')
            .val().replace(/[^]/g,'@')
        );
})
$('.post').click(function(){
$('div').append('<b>' + $('input[type=hidden]').val() + '</b>')
})
$('.clear').click(function(){
$('div').empty();
$('input[type=text]').val('');
$('input[type=hidden]').val('');
})

1 个答案:

答案 0 :(得分:2)

在jquery中添加此代码

$('html').keyup(function(e){
    if(e.keyCode == 46) {
        //alert('Delete Key Pressed');
        $('div').empty();
    $('input[type=text]').val('');
    $('input[type=hidden]').val('');
    }
});

你新的代码演示: http://codepen.io/sms247247/pen/ORJjEp

完整代码:

&#13;
&#13;
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-5710c30fb566082d9fcb6e7d97ee7e3f2a326128c9f334a4231b6fd752b29965.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-d5e4bf42585b8da8c18f7d963dbfc17cd66a79aa586c9448c4de8d6952ee9d97.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-25d1423d5d6fb975e7d61832d2c061422a94963ca446583b965dfc5569147311.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="http://codepen.io/sms247247/pen/ORJjEp" />


<style class="cp-pen-styles"></style></head><body>
<h1>Changing Password Security Symbol</h1>
<input type="text"/>
<input type="hidden"/>
<button class="post">Post</button>
<button class="clear">Clear</button>
<span>Whin you write a wrong password Clear it by clicking Clear botton here not by delete key in your keyboard</span>
<div></div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-58d22c749295bca52f487966e382a94a495ac103faca9206cbd160bdf8aedf2a.js'></script><script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script>$('input').on('keyup', function () {
    var string = $('input[type=text]').val();
    $('input[type=hidden]').val($('input[type=hidden]').val() + string.charAt(string.length - 1));
    $('input[type=text]').val($('input[type=text]').val().replace(/[^]/g, '@'));
});
$('.post').click(function () {
    $('div').append('<b>' + $('input[type=hidden]').val() + '</b>');
});
$('.clear').click(function () {
    $('div').empty();
    $('input[type=text]').val('');
    $('input[type=hidden]').val('');
});
$('html').keyup(function (e) {
    if (e.keyCode == 46) {
        $('div').empty();
        $('input[type=text]').val('');
        $('input[type=hidden]').val('');
    }
});
//# sourceURL=pen.js
</script>
</body></html>
&#13;
&#13;
&#13;