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" >

easyui textbox 密码框的prompt提示语显示*号问题的解决办法

猜你喜欢