Running script on keypress in a textArea? (Sugarcube 2)

RTgrl

Hello!

I'm using Twine 2 with Sugarcube 2 to build a game centered around text input.

I want to be able to have players submit text with the enter key.

Currently i'm doing text submit with a custom parsing macro + goto wrapped in a <<click>> macro. I need to use a textArea because double checking text is important to the game, and the amount of text people usually write has to use word wrap to display in full. (I've yet to see someone intentionally use a newline, so losing it won't be a big deal.)

Is there a way to run script(s) or forward to another passage on an enter keypress with a textArea in focus? Currently my text area + button for submitting text and progressing to the next passage looks like this:

<<textarea "$variables.answers[0]" $variables.boxText autofocus>>
<<click "SUBMIT ANSWER">><<ruleCheck $variables>><<goto passage02>><</click>>

Ideally, I'd like it to run <<ruleCheck $variables>> and <<goto passage02>> on keypress, but if I could just get a passage forward or a single macro to activate on an enter keypress, I can work around that.

Claretta

Yeah it's easy to activate a click macro on keypress.

In story javascript write:

$(document).on("keydown", function (event) {
	if (event.which === 13) {
		$(".textenter")
	.find('a')
	.trigger("click");
	}
});

Then you would change your click macro to:

<span class="textenter"><<click "SUBMIT ANSWER">><<ruleCheck $variables>><<goto passage02>><</click>></span>

This will convert the click macro within the textenter span to also activate on enter.

If you want to hide the click macro to just leave enter activation, you can use css to set visibility or display to hidden for links of the ".textenter a" class, and the enter key will still work.


I haven't tested this to see if the focus area changes whether this will work, though. I'm just guessing it won't since it just searches for all links.

RTgrl

Claretta wrote: »

Yeah it's easy to activate a click macro on keypress.

In story javascript write:

$(document).on("keydown", function (event) {
	if (event.which === 13) {
		$(".textenter")
	.find('a')
	.trigger("click");
	}
});

Then you would change your click macro to:

<span class="textenter"><<click "SUBMIT ANSWER">><<ruleCheck $variables>><<goto passage02>><</click>></span>

This will convert the click macro within the textenter span to also activate on enter.

If you want to hide the click macro to just leave enter activation, you can use css to set visibility or display to hidden for links of the ".textenter a" class, and the enter key will still work.


I haven't tested this to see if the focus area changes whether this will work, though. I'm just guessing it won't since it just searches for all links.

Thanks! I'll try this out tonight and tell you how it goes

TheMadExile

Why are you using a <<goto>> when the <<click>> macro natively supports forwarding to another passage? For example, either of the following would be better:

<<click "SUBMIT ANSWER" "passage02">><<ruleCheck $variables>><</click>>

<<click [[SUBMIT ANSWER|passage02]]>><<ruleCheck $variables>><</click>>

Beyond that, if you're only going to use it for this purpose, then something similar to, but not exactly, what Claretta outlined should work fine.

I would suggest the following for your <<textarea>>/<<click>>:

<span class="textenter">\
<<textarea "$variables.answers[0]" $variables.boxText autofocus>>
<<click "SUBMIT ANSWER" "passage02">><<ruleCheck $variables>><</click>>\
</span>

And the following to enable the functionality you want: (goes in Story JavaScript)

postdisplay["text-enter-setup"] = function () {
	$(".textenter .macro-textarea").on("keydown", function (evt) {
		if (evt.which === 13) {
			evt.preventDefault();
			$(".textenter")
				.find(".macro-textarea")
					.trigger("change")
				.end()
				.find(".macro-click")
					.trigger("click");
		}
	});
};

PS: If you wanted to use a <<button>> instead of <<click>>, which is more common for this sort of thing, then simply replace the <<click>> with the <<button>> and change ".macro-click" to ".macro-button" in the script.

RTgrl

TheMadExile wrote: »

Why are you using a <<goto>> when the <<click>> macro natively supports forwarding to another passage? For example, either of the following would be better:

<<click "SUBMIT ANSWER" "passage02">><<ruleCheck $variables>><</click>>

<<click [[SUBMIT ANSWER|passage02]]>><<ruleCheck $variables>><</click>>

It's because I tried to control passage switching with <<goto>> on the javascript side first, then shifted it to the twine side starting with my existing <<goto>> plan and working backwards. There was some more interesting stuff to do once it worked, so I stopped once it worked. ¯\_(ツ)_/¯

TheMadExile wrote: »

Beyond that, if you're only going to use it for this purpose, then something similar to, but not exactly, what Claretta outlined should work fine.

I would suggest the following for your <<textarea>>/<<click>>:

<span class="textenter">\
<<textarea "$variables.answers[0]" $variables.boxText autofocus>>
<<click "SUBMIT ANSWER" "passage02">><<ruleCheck $variables>><</click>>\
</span>

And the following to enable the functionality you want: (goes in Story JavaScript)

postdisplay["text-enter-setup"] = function () {
	$(".textenter .macro-textarea").on("keydown", function (evt) {
		if (evt.which === 13) {
			evt.preventDefault();
			$(".textenter")
				.find(".macro-textarea")
					.trigger("change")
				.end()
				.find(".macro-click")
					.trigger("click");
		}
	});
};

PS: If you wanted to use a <<button>> instead of <<click>>, which is more common for this sort of thing, then simply replace the <<click>> with the <<button>> and change ".macro-click" to ".macro-button" in the script.

That looks like exactly what i need, thanks! And- thanks in general for all the questions you answer on these forums. Your posts have really helped me out, especially since I'm stretching the intended purpose of Twine pretty far on my first game.

What's the benefit of using "button" over "click"?

TheMadExile

RTgrl wrote: »

What's the benefit of using "button" over "click"?

None. They're really the same macro—the HTML element used is the only real difference between them.

I only mentioned it because, as I said, it's more common to pair an input element with a <<button>>—probably because that's what you do in HTML. There's nothing inherently wrong with using <<click>> if that's your preference.