Set focus to specific search text box on button click

1

I have a few simple text boxes that function as search. I would like to have the correct text box “selected” or focus set when the corresponding button is clicked. After some extensive Googling, I have not found anything that works. Anyone here have any ideas?

2

Hi,

It is always best post an example of your project. So we do not have to guess at your setup.

my initial thoughts would be that all you need is give the input an ID and thenwhen a button is clicked use Javascript to tell it to focus()

focusInput.hype.zip (21.8 KB)

1 Like
3

What you posted is exactly what I am looking for, here is the stripped down version of my project, showing just the buttons and search boxes. I tried to implement the code, and it’s not working. I must be missing something.

Search feature.hype.zip (39.0 KB)

4

Unfortunately, there is a lot of code in there with duplicate ID’s plus what you have are iframes too (HTML widgets) so Mark’s code above will not work for your setup. I’m sure Mark will be back when he has time to offer something else if he has time. If nothing is done by tomorrow. I’ll see if I can take a look at it. :wink:

5

Thank you. I saw the duplicate IDs would be a problem, so I was mostly trying to get the Google and Reddit one working to start off with, then correct the others.

6

As @DBear says, Your forms are in widgets so there will be no communication between them and the main scene code.

You need to put the forms in a rectangle.

From a quick look at what you have there is a lot of unnecessary code, styling etc…

It would be simpler if you had a single search form and just changed its placeholder and submit function depending on which search button is clicked.

This would cut out a lot of repeating code and animation that is used just to get one of the many forms in place.

var theSearch = hypeDocument.getElementById('search');
	var theSearchForm = theSearch.querySelector('form')
	
	window.elementID = element.id;
	window.theSearchFormInput = theSearchForm.querySelector('input')
	window.theSearchFormInput.setAttribute('placeholder',element.id);
	window.theSearchFormInput.focus()
	
	 
	theSearchForm.removeEventListener('submit', setSearch );
	 
theSearchForm.addEventListener("submit", setSearch, false);
 
 
function setSearch(){
var dashboardURL = window.theSearchFormInput.value;
 
 
 switch (window.elementID) {
    case "Search-Reddit":
      	
      	window.open("http://www.reddit.com/r/"+dashboardURL+"/");
        break;
    case "Search-Google":
    
    window.open("https://www.google.com/webhp?hl=en#hl=en&q="+dashboardURL+"");

        
     }	 
 
}

Here in this example you only have one form. Each button calls the same function and the styles ( if they are really needed can just go in the head.

	<style>
#theSearch {
    width: 400px;
    height: 33px;
    color: silver;
    font-size: 20px;
    padding-left: 15px;
    border:0px solid black;
    border-radius:25px;
    padding:1px; 
    text-indent: 0px;
    
}

#theSearch:focus{
    outline:none;
    border-color:none;
    box-shadow:0 0 0px black;
}



</style>

This all makes for easy reading and managing.

This is a very quick put together example. So I have not done any animation or scene setup. Also the code probably can be refined further.

SearchMHv1.hype.zip (15.6 KB)

1 Like
7

Thank you so much. This is perfect. The last thing I need to do is have on load, the Google box selected by default/autofocus. It looks like it would be easiest to simulate the Google button being pressed, is that possible?

8

After some research, it looks like using the following Javascript set to load upon scene load should be working, but it’s not.

document.getElementById('Search-Google').click();

SearchMHv2.hype.zip (14.8 KB)

9

I suspect this doesn’t work because Hype doesn’t technically use the onclick event for click detection. It is probably a better workaround to call the code directly; you can access via hypeDocument.functions().searchSetUp(...).

Also I noticed a typo in “Google” in the actual document:

document.getElementById('Search-Googe').click();

But fixing this doesn’t resolve the issue.

10

I was already looking at this calling the initial function as @jonathan also points out :smile:

But was not happy with the removeAddEvent. It does not seem to work as expected when calling the function from another function. Had to wait to I got home to continue…

We change the first bit of code to an On Scene Load. And have the addEvent only added once. But we use the global var of the element id in the callback function.

Then the buttons point to the second function that just set the global element id var and calls the first function.

I feel this maybe more reliable. I was not 100% the removeAddEvent was working…

I have also added a reset to the input value when a button is clicked.

And prevent the scene reloading when the submit event fires by adding onsubmit="return false" to the form.

SearchMHv2.hype.zip (16.0 KB)

2 Likes