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