Default "onfocus" and "onblur" functionality

[mshaffer]

Without having to "bind" focus or blur, why can't I use the blur/focus built in functions; that is HTML standard events.

e.g.,

DOES NOT FOCUS
<input class="easyui-textbox input-width" id="signup-input-fname" name="fname" prompt="First Name" data-options="required:true" onfocus="this.select();">

DOES NOT FOCUS, DOES NOT TRIGGER FUNCTION verifyEmail()
<input class="easyui-textbox input-width" id="signup-input-email" name="email" prompt="Email" data-options="required:true,validType:'email'" onfocus="this.select();" onblur="verifyEmail();">

[jarry]

Please look at http://www.jeasyui.com/forum/index.php?topic=6093.0

[mshaffer]

A redirect to another topic doesn't answer the question.  The other topic has the same flawed answer.

"Call 'textbox' method to get the text box, you will be able to bind any events on it." [your redirect]

"onfocus" is a DOM event ... http://www.w3schools.com/jsref/event_onfocus.asp

Why does easy-ui hijack the default behaviors of DOM elements?  Your solution is to suggest I have to "marry myself" to easy-ui which necessitates a "divorce" from the DOM.  That is bad cascading/inheritance logic.

At the system level, the easy work around is to see the "true DOM" events and the "easy-ui" system could then "rebind" the events to the easy-ui alterations from the DOM.  If you break it, you should also fix it.

[mshaffer]

Bump...

So in HTML standard I can do this

Code:

<input id="my-id" type="text" onfocus="this.select();" />

What is the equivalent for "easyui-textbox" or "easyui-passwordbox"  ?

Code:

$('#my-id').textbox('textbox').bind('focus', function(e){
	$('#login-input-email').textbox('textbox').select();						
});

[mshaffer]

So here is my solution, with two functions ... basic focus-select

Code:

function bindFocusSelect(selector)
	{
	$(selector).textbox('textbox').bind('focus', function(e){
			$(selector).textbox('textbox').data('has-triggered', false);
			$(selector).textbox('textbox').select();	
		});
	}

The extra data attribute is intentional... to allow for "blur" or "enter" to trigger an event only once...

Code:

function bindTriggerEnterOrBlur(selector,myFunction)
	{
	$(selector).textbox('textbox').bind('blur keypress', function(e){
		if (e.type == 'blur' || e.keyCode == 13) {
			if (!$(selector).textbox('textbox').data('has-triggered')) {
					$(selector).textbox('textbox').data('has-triggered', true);
				 // do something only once, not twice
				 myFunction();
				// e.g., if I hit "[enter"] and tab to blur, I don't want it to call twice...
				}
			 }
		});
		
	bindFocusSelect(selector);
	}

The usage:

Code:

bindTriggerEnterOrBlur('#login-input-email',submitLoginEmail);

would call a function "submitLoginEmail()" without parameters

... or the most basic usage ...

Code:

bindFocusSelect('#login-input-email');