Print Page - Default "onfocus" and "onblur" functionality

Title: Default "onfocus" and "onblur" functionality
Post by: mshaffer on October 21, 2016, 10:37:34 AM

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();">

Title: Re: Default "onfocus" and "onblur" functionality
Post by: jarry on October 22, 2016, 03:55:58 PM

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

Title: Re: Default "onfocus" and "onblur" functionality
Post by: mshaffer on October 23, 2016, 11:38:32 PM

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.

Title: Re: Default "onfocus" and "onblur" functionality
Post by: mshaffer on November 24, 2016, 03:13:25 AM

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();						
});

Title: Re: Default "onfocus" and "onblur" functionality
Post by: mshaffer on December 02, 2016, 10:35:26 AM

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');

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: mshaffer on October 21, 2016, 10:37:34 AM