EasyUI Forum
April 18, 2024, 04:26:42 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Invoking keyless/keydown event of a textbox  (Read 6015 times)
thecyberzone
Full Member
***
Posts: 176



View Profile Email
« 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.
Logged
thecyberzone
Full Member
***
Posts: 176



View Profile Email
« Reply #1 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>
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #2 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');
}
}
})
})
Logged
thecyberzone
Full Member
***
Posts: 176



View Profile Email
« Reply #3 on: April 26, 2018, 08:41:51 AM »

Many thanks
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!