How to auto-select a textbox.

Question

PFFFFFFFFF IM TRIGGERED.

Been working on hours on this and still can't get it to work correctly.

Here is my Javascript.

if (typeof window.CustomScripts == "undefined") {
	window.CustomScripts = {
		updateVariable(inputDefend) {
			// Get the value from the input textbox at time of click.
			var value = $("input[name='" + inputDefend + "']")[0].value;
			// Update the variable.
			State.variables[inputDefend] = value;
		}
	};
};

(css is empty)

And here is Passage A(Defend)

<input id="Defend" name="Defend" value="">
<button type="submit" onclick="CustomScripts.updateVariable('Defend')">Defend!</button></center>

[[Attack]]

And here is passage B(Attack)

$Defend

Did it work???

[[Try again|Defend]]

I can't get the text box to be selected on page start up, and things like [autoselect="autoselect"] make it so that the textbox is selected for one second and then stops, doing more harm than good. How do I bypass this?

Answer 1

> and things like [autoselect="autoselect"] 
I believe you mean autofocus.

Harlowe's Passage Transition effect causes the passage related area of the page to be rendered twice, first with a special parent element wrapping that passage area, and then after a short delay it replaces that area but this time withou the special parent element. This double rendering is undoing your autofocus.

One way way to get around this issue is to use the (live:) macro to run some JavaScript after a short delay, this JavaScript reasigns the focus back to the input element.

<input id="Defend" name="Defend" value="" autofocus>
<button type="submit" onclick="CustomScripts.updateVariable('Defend')">Defend!</button></center>

(live: 1s)[{
	(stop:)	
	<script>
		$("#Defend").focus();
	</script>

}]

[[Attack]]

 

Comments

You are the God of Twine. I never thought it was rendered twice.

BTW I changed (live: 1s) to (live: 0.8s) so there isn't a pause.

Thank you so much for everything you've done to help me.