Response title
This is preview!
Move this topic
Unable to focus on textbox
in Using jQuery UI
•
6 months ago
input tags attached with autocomplete could not be re-focused or re-selected. If autocomplete is removed, the tag can be focused any times.
I have checked both readonly and disabled attributes which are not the reason for this problem.
Thanking in advance for helpful suggestions.
P.S.
I am using jQuery lib verson 1.8.2 and ui versis on 1.9.1.
Raj
I have checked both readonly and disabled attributes which are not the reason for this problem.
Thanking in advance for helpful suggestions.
P.S.
I am using jQuery lib verson 1.8.2 and ui versis on 1.9.1.
Raj
1
Replies(8)
Re: Unable to focus on textbox
6 months ago
Hey,
I think i'm am reading what you asking for correctly, let me know if this is what you are looking for.
to have a browser focus on a specific textbox or textarea on load add this..
$(document).ready(function(){
$('#focus').focus();
});
Leave a comment on steve85's reply
Re: Unable to focus on textbox
6 months ago
bharatir34,
You don't tell us the behavior you are trying to achieve or provide any code, so its difficult to help you.
Here's a guess. Often people want to focus on the next input box after the user selects an item in the Autocomplete dropdown. If that is the behavior you want, put a focus statement in the select: option of your Autocomplete.
You don't tell us the behavior you are trying to achieve or provide any code, so its difficult to help you.
Here's a guess. Often people want to focus on the next input box after the user selects an item in the Autocomplete dropdown. If that is the behavior you want, put a focus statement in the select: option of your Autocomplete.
Leave a comment on mike_laird's reply
Re: Unable to focus on textbox
6 months ago
Sorry for lack of clarity in problem.
scenario:
$('#input1').autocomplete() is perfectly working. When I type something in input box "input1", autocomplete displayed and i can select and populate the selected value to the input box. Now next input box is in focus and if I want to focus "input1" again by clicking it, it is not getting focus. In another word, initially the input box can be focused and anything can be typed in it also autocomplete works fine. Once the input box loses focus and if I want to focus or select the input box sometime later, it is not going to be selected.
Thanks everyone for suggestion and again sorry for confusion.
Raj
scenario:
$('#input1').autocomplete() is perfectly working. When I type something in input box "input1", autocomplete displayed and i can select and populate the selected value to the input box. Now next input box is in focus and if I want to focus "input1" again by clicking it, it is not getting focus. In another word, initially the input box can be focused and anything can be typed in it also autocomplete works fine. Once the input box loses focus and if I want to focus or select the input box sometime later, it is not going to be selected.
Thanks everyone for suggestion and again sorry for confusion.
Raj
Leave a comment on bharatir34's reply
Re: Unable to focus on textbox
6 months ago
hey Raj
Can you show us your html form and javascript so that we can see what you are using as what you are asking for should be working with no code, unless you mean you want specific fields to be filled in by the browsers saved data, such as name, address, email etc.....
Thanks
Re: Unable to focus on textbox
6 months ago
Section of html:
<div id="billing_blkDetails">
<div id="blkDetails_row1" class="row">
<div id="blkDetails_row1_col1" class="multi-col first-col">
<div class="caption">Referer:</div>
<div class="multi-content">
<input type="text" size="20" id="txtReferer" />
</div>
<div><button id="addReferer">Add Referer</button></div>
</div>
<div id="blkDetails_row1_col2" class="multi-col sec-col">
<div class="caption">Customer Name:</div>
<div class="multi-content">
<input type="text" size="40" id="custName" />
</div>
</div>
</div>
<div id="blkDetails_row2" class="row">
<div id="blkDetails_row2_col1" class=" multi-col first-col">
<div class="caption">Cust. Address:</div>
<div class="multi-content">
<input type="text" size="40" id="custAdd1" />
</div>
</div>
<div id="blkDetails_row2_col2" class=" multi-col sec-col">
<div class="caption">Phone/Mobile:</div>
<div class="multi-content">
<input type="text" size="30" id="custPhone" />
</div>
</div>
</div>
javascript:
$(document).ready(function(){
$('#txtReferer').autocomplete({minLength:3,
source:[{label:'test1',value:'Referer1'},{label:'test2',value:'Referer2'},{label:'test3',value:'Referer3'}]
});
$('#txtReferer').on('keyup',function(ev){
if(ev.which==13 || ev.which==9)
{
if($('#txtReferer').val()!='')
$('#custName').focus();
else
setTimeOut($('#txtReferer').focus(),200); //Upto this ok!!!!
}
});
});
//Because the html and js files are larger, I have copied only the related sections.
// once the custName is selected and I want to select txtReferer again, i am not able to do so.
//but setTimeOut($('#txtReferer').focus(),200); is working!
Thanking you
Raj
<div id="billing_blkDetails">
<div id="blkDetails_row1" class="row">
<div id="blkDetails_row1_col1" class="multi-col first-col">
<div class="caption">Referer:</div>
<div class="multi-content">
<input type="text" size="20" id="txtReferer" />
</div>
<div><button id="addReferer">Add Referer</button></div>
</div>
<div id="blkDetails_row1_col2" class="multi-col sec-col">
<div class="caption">Customer Name:</div>
<div class="multi-content">
<input type="text" size="40" id="custName" />
</div>
</div>
</div>
<div id="blkDetails_row2" class="row">
<div id="blkDetails_row2_col1" class=" multi-col first-col">
<div class="caption">Cust. Address:</div>
<div class="multi-content">
<input type="text" size="40" id="custAdd1" />
</div>
</div>
<div id="blkDetails_row2_col2" class=" multi-col sec-col">
<div class="caption">Phone/Mobile:</div>
<div class="multi-content">
<input type="text" size="30" id="custPhone" />
</div>
</div>
</div>
javascript:
$(document).ready(function(){
$('#txtReferer').autocomplete({minLength:3,
source:[{label:'test1',value:'Referer1'},{label:'test2',value:'Referer2'},{label:'test3',value:'Referer3'}]
});
$('#txtReferer').on('keyup',function(ev){
if(ev.which==13 || ev.which==9)
{
if($('#txtReferer').val()!='')
$('#custName').focus();
else
setTimeOut($('#txtReferer').focus(),200); //Upto this ok!!!!
}
});
});
//Because the html and js files are larger, I have copied only the related sections.
// once the custName is selected and I want to select txtReferer again, i am not able to do so.
//but setTimeOut($('#txtReferer').focus(),200); is working!
Thanking you
Raj
Leave a comment on steve85's reply
Re: Unable to focus on textbox
6 months ago
Hey Raj
sorry for the late reply, i've been away.
I've looked at the code you have provided and everything works fine. Once i have typed something in id="txtReferer", i then go and type my name in the inputbox - id="custName", I am then able to go back to id="txtReferer" and change the value, so unless you have other code on you page relating to id="txtReferer" which is disabling the inputbox once a value has been given, then I am lost to what it is you are asking for as so far everything seems fine.
Re: Unable to focus on textbox
6 months ago
Thank you very much for your valuable suggestion.
Actually this is happening in one page only. In other pages same logic is perfectly working. As you told, I am looking into if there is some ghost javascript command is creating the problem. If there is any development I will post here.
Thanks and regards
Raj
Actually this is happening in one page only. In other pages same logic is perfectly working. As you told, I am looking into if there is some ghost javascript command is creating the problem. If there is any development I will post here.
Thanks and regards
Raj
Leave a comment on steve85's reply
Re: Unable to focus on textbox
6 months ago
It appeared this problem was due to css issue. However I could not figure out why.
style rules:
.multi-col
{
width:50%;
height:100%;
}
.first-col
{
width:48%;
left:0px; top:0px; float:left;
}
.sec-col
{
width:48%; top:0px;
float:left;
}
working html:
<div id="blkOpt_Row2_Col2" class="sec-col multi-col">
<div class="caption mandatory">Schedule Date:</div>
<div class="multi-content">
<input type="text" size="15" id="schldDate" /> <input type="text" size="15" id="schdlDateloc" />
</div>
</div>
problem html:
<div id="blkOpt_Row2_Col2" class="sec-col multi-col">
<div class="caption mandatory">Schedule Date:</div>
<div class="multi-content">
<input type="text" size="15" id="schldDate" />
</div>
<input type="text" size="15" id="schdlDateloc" />
</div>
On firebug the child collection of #blkOpt_Row2_Col2 are without input #schldDate (in second or problem set) whereas in working set the firebug correctly display same as child.
Thanking to everyone for help. I would appreciate any suggestions for above codes. May be I am missing something somewhere.
Raj
style rules:
.multi-col
{
width:50%;
height:100%;
}
.first-col
{
width:48%;
left:0px; top:0px; float:left;
}
.sec-col
{
width:48%; top:0px;
float:left;
}
working html:
<div id="blkOpt_Row2_Col2" class="sec-col multi-col">
<div class="caption mandatory">Schedule Date:</div>
<div class="multi-content">
<input type="text" size="15" id="schldDate" /> <input type="text" size="15" id="schdlDateloc" />
</div>
</div>
problem html:
<div id="blkOpt_Row2_Col2" class="sec-col multi-col">
<div class="caption mandatory">Schedule Date:</div>
<div class="multi-content">
<input type="text" size="15" id="schldDate" />
</div>
<input type="text" size="15" id="schdlDateloc" />
</div>
On firebug the child collection of #blkOpt_Row2_Col2 are without input #schldDate (in second or problem set) whereas in working set the firebug correctly display same as child.
Thanking to everyone for help. I would appreciate any suggestions for above codes. May be I am missing something somewhere.
Raj
Leave a comment on bharatir34's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to bharatir34's question
Statistics
- 8 Replies
- 410 Views
- 2 Followers
