easyui textbox 密码框的prompt提示语显示*号问题的解决办法
在一些修改密码功能页上,需要在easyui textbox 上显示提示语,通常最简洁的方式是用prompt,但是因为textbox是密码框,所以prompt显示时变成*号,像输入的密码一样隐藏掉了。只有当输入框获得焦点时,这个提示语才会显示。
网上找到一种解决方法是:
给input框去掉type="password",添加 οnfοcus="this.type='password'",聚焦的时候改变input输入框的类型,这样输入框就可以正常显示placeholder提示信息,而且它还是个密码框,问题解决~
这个方法可以用在原生H5的input框上,但因为我的项目UI框架用的是easyui,而easyui textbox 的事件里是没有οnfοcus的,经过一番摸索结合网上的资料,我的解决方法是:
1、把textbox的type从password改成text,type="text"
2、在data-options中的events添加fοcus事件:events:{focus: function(){ $(this)[0].type = 'password'; }}
这样就基本解决了显示问题,但是并不完全,当用户触发这个焦点事件后,如果用户没有输入密码,又去操作其它东西,则这个输入框又和原来一样,提示语变成*号,为此再在events上添加下面一个事件:
blur: function(){ if ($(this)[0].value =="") {$(this)[0].type = 'text';}},这句的目的是当输入框失去焦点且用户没有输入密码时,这个输入框的type变回text,这样可以正常prompt的提示。
为了做成通用的事件,稍微改了下结构,变成下图所示
JS方法
代码如下
<script type="text/javascript"> function easyuitextfocus(obj) { console.log("focus"); //console.log(obj); obj[0].type = 'password'; } function easyuitextblur(obj) { console.log("blur"); //console.log(obj); if (obj[0].value =="") { obj[0].type = 'text'; } } </script> <input type="text" class="easyui-textbox zth-value" data-options="prompt:'输入原始密码', events:{focus: function(){ easyuitextfocus($(this)); },blur: function(){ easyuitextblur($(this)); }}," style="width: 300px" >