Print Page - Invoking keyless/keydown event of a textbox

Title: Invoking keyless/keydown event of a textbox
Post by: thecyberzone on April 25, 2018, 07:50:28 AM

I have an easyui-textbox and an easyui-linkbutton. By default easyui-linkbutton remains disabled. I want whenever any alpha-numeric key is pressed in textbox, linkbutton will be enabled, and making textbox empty will again make the linkbutton disabled.
I used onChange event, but when focus goes out of textbox, only then button becomes enabled. Could not bind user defined keyless/keydown event successfully.
Please help me.

Title: Re: Invoking keyless/keydown event of a textbox
Post by: thecyberzone on April 25, 2018, 11:32:30 PM

I have tested following codes :

Code:

        $('#jobpos').textbox({
		  onChange: function(){
		    $('#jobpos').textbox('setValue',$(this).val());
		    $('#btnAdd').linkbutton('enable');
		    $('#btnDel').linkbutton('enable');
		  }
		});

and

Code:

$('#jobpos').textbox('textbox').bind('keypress', function(e){
			$('#jobpos').textbox('setValue',$(this).val());
		    $('#btnAdd').linkbutton('enable');
		    $('#btnDel').linkbutton('enable');
		});

In first case when focus goes out of #jobpos textbox, only then Add and Del button becomes active.
But in 2nd case nothing happens, may be any mistake in binding keypress with the textbox, it is not functioning at all.

here is the HTML I have used

Code:

			<div class="fitem" style="float:left; text-align: left; width: 680px; margin-left:20px; margin-top:0px;  margin-bottom:10px;">
				<label2>Job Position</label2>
				<input id="jobpos" name="jobpos" style="width:400px;"  class="easyui-textbox" type="text" />
				<a id="btnAdd" href="#" class="easyui-linkbutton" data-options="iconCls:'fa fa-plus-circle'" style="margin-left: 10px;" onclick="addJobpos()">Add</a>
				<a id="btnDel" href="#" class="easyui-linkbutton" data-options="iconCls:'fa fa-minus-circle'" style="margin-left: 10px;" onclick="delJobpos()">Del</a>
			</div>

Title: Re: Invoking keyless/keydown event of a textbox
Post by: stworthy on April 26, 2018, 01:55:19 AM

Try this code to get the real-time inputing text.

Code:

$('#jobpos').textbox({
	inputEvents: $.extend({}, $.fn.textbox.defaults.inputEvents, {
		keyup: function(e){
			var value = $(e.data.target).textbox('getText');
			if (value){
				$('#btnAdd,#btnDel').linkbutton('enable');
			} else {
				$('#btnAdd,#btnDel').linkbutton('disable');
			}
		}
	})
})

Title: Re: Invoking keyless/keydown event of a textbox
Post by: thecyberzone on April 26, 2018, 08:41:51 AM

Many thanks

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: thecyberzone on April 25, 2018, 07:50:28 AM