Member Avatar for msqueen082

hello
I wrote code for a scramble word game and I am trying to set focus everytimge I click on check button..I've got it so it will set focus when I start game, but whenever I put put setFocus() on the onclick of the button it will not work...
is there any way the I can have two procedures for onclick...like

<input id="inbox" type="text" /><input type="button" value="check" onclick="guess()" "setFocus()"/>

I also want to selectall if the word is incorrect

not sure how to go about doing this..I did research on this problem, but they all give me examples on applying just one thing to the onclick not two..
thank you

  • 2 Contributors
  • 3 Replies
  • 123 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by msqueen082

Dani AI

Generated

A few practical notes to make focus-and-select reliable across browsers and scenarios. The thread already shows that multiple actions on a click are fine and that the selection failure came down to using the wrong method (nice sleuthing, , and good pointer from ). Below are extra tips and a modern, robust pattern to apply if selection still behaves intermittently.

Common pitfalls and fixes

  • The browser can move focus to the button you clicked before your selection code runs. If selection seems to fail sporadically, run the focus/selection after the current event loop tick (or bind to an earlier event such as mousedown when appropriate).
  • If the button is inside a form and is a submit button, the form submit can interrupt your script. Use type="button" or call event.preventDefault().
  • Selection won't work when the input is disabled, readOnly, or not yet in the DOM. Verify the element reference and script timing (DOMContentLoaded or defer).
  • Mobile browsers (especially iOS Safari) sometimes limit programmatic focus/keyboard behavior; expect different UX there.

A robust approach (bind, focus, then set selection range)

var btn = document.querySelector('#checkBtn');
var input = document.querySelector('#inbox');

btn.addEventListener('click', function (e) {
  e.preventDefault(); // if part of a form
  // Defer briefly so the browser finishes its own focus changes
  setTimeout(function () {
    input.focus();
    input.setSelectionRange(0, input.value.length);
  }, 0);
});

If setSelectionRange is not available in an older host, a legacy fallback is required. For browser docs see HTMLElement.focus and HTMLInputElement.setSelectionRange.

Quick troubleshooting: check the console for errors, verify element IDs/selectors, ensure the element is not disabled or hidden, and test both desktop and mobile to observe differences.

Recommended Answers

All 3 Replies

Member Avatar for Airshow

Msqueen,

Javscript written in an HTML onclick/onchange/onblur etc. is nothing more than the contents of an anonymous function. Therefore, simply separate statements with semicolons.

<... onclick="guess(); setFocus();" ...>

Airshow

Member Avatar for msqueen082

That fixed my problem of focus,,but the select all didn't work...here is how I coded a funtion for select all and I also put it in the onclick of the button as
selectAll();

function selectAll()
		{
			document.getElementById("inbox").selectAll();
			}// set select all to the text box
Member Avatar for msqueen082

Answered my own question..thank you for your help

It was that I put selectAll in my function instead of select..

function selectAll()
        {
            document.getElementById("inbox").select();
            }// set select all to the text box
Edited by Dani because: Fixed formatting
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.