Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Highlighted
New Contributor
Posts: 3
Registered: ‎09-02-2010
My Device: Bold 9700
My Carrier: Rogers
Accepted Solution

Input Textbox loses focus after setting innerHTML

I'm trying to modify my widget so that it supports search as you type. 

 

But when my javascript event fires to submit the ajax request the input box keeps losing focus.  I've tried resetting the focus after writing out the html with blackberry.focus.setFocus(), but that function sets the cursor at the beginning of the input box instead of at the end so i can continue typing.

 

Is there a way to update the html inside a DIV without losing focus on my input box, or is there a way to make blackberry.focus.setFocus() go to the end of the string currently in the box?

 

Here's a sample of the code i'm trying to get to work in my 9700 Simulator:

 

----
-- JS Code
---
function doLiveSearch(str) {
if (str.length==0) {
document.getElementById("results").innerHTML="";
return;
}
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("results").innerHTML=xmlhttp.responseText;
blackberry.focus.setFocus("search");
}
}
xmlhttp.open("GET","livesearch.php?q="+str,true);
xmlhttp.send();
}


-----
-- HTML Code
-----
<div class="searchBox">
    <div class="searchBoxText">Search:</div>       
    <input id="search" onkeyup="doLiveSearch(this.value)" name="term" type="text" />
</div>
<div class='results'></div>

----
here's an example what my lookup code returns.
----
<div id="results">
<div class="arrowList" x-blackberry-focusable='true' onclick="location.href = 'getDef.php?id=87';">
    <span class="arrowListText">One</span>
  <img class="arrow" src="images/arrow.png" border="0" />
  </div>
<div class="arrowList" x-blackberry-focusable='true' onclick="location.href = 'getDef.php?id=88';">
    <span class="arrowListText">Two</span>
    <img class="arrow" src="images/arrow.png" border="0" />
 </div>
</div>
Developer
Posts: 185
Registered: ‎08-17-2008
My Device: Red BlackBerry Z10
My Carrier: Vodafone

Re: Input Textbox loses focus after setting innerHTML

[ Edited ]

Try with selectionStart and selectionEnd before focus:

 

 

document.getElementById('txtEmail').selectionEnd =

 

document.getElementById('element').selectionStart = document.getElementById('element').value.length;

document.getElementById('element').selectionEnd = document.getElementById('element').value.length;

 

document.getElementById(elemenl').focus();

Josep Maria
New Contributor
Posts: 3
Registered: ‎09-02-2010
My Device: Bold 9700
My Carrier: Rogers

Re: Input Textbox loses focus after setting innerHTML

Worked perfectly, thanks!