prompt prompt easyui textbox display the password box solutions to problems * No.

 

In some change password functionality pages to be displayed on the prompt easyui textbox, usually the most simple way is prompt, but because the textbox is the password box, when it becomes an asterisk prompt is displayed, enter the same password as hide out . Only when the input box gets the focus, this prompt appears.

One solution is to be found online:

To remove the block input type = "password", add οnfοcus = "this.type = 'password'", when the input focus change type input box, and input box placeholder message may be displayed properly, and it is a password box , problem solving ~

This method can be used on the native input box H5, but because my project UI framework using a easyui, and easyui textbox event where there is no οnfοcus, after some exploration data in conjunction with the Internet, my solution is:

1, type into the textbox's text, type = "text" from password

2, events in the data-options was added fοcus event: events: {focus: function () {$ (this) [0] .type = 'password';}}

This basically solved the display problem, but not entirely, when the user triggers the focus of this event, if the user does not enter a password, went to the operation of other things, then the input box and, like the original, the prompt becomes an asterisk, as this then add the following event in the events:

blur: function () {if ($ (this) [0] .value == "") {$ (this) [0] .type = 'text';}}, when the input sentence is the object of the box loses focus and when the user does not enter a password, this type of input box back into text, which can prompt a normal prompt.

In order to make a common event, little changed lower structure, shown below into

 

JS method

 

 code show as below

<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: 'Enter the original password'
                                   events:{focus: function(){ easyuitextfocus($(this)); },blur: function(){ easyuitextblur($(this)); }},"
                                   style="width: 300px" >