Text input box without submit button?

wraithrose · February 2016

Using Twine 2, Sugarcube 2.

I have a text input, where the player can type something and stuff will happen depending on what they typed.

My problem: The way I have it set up, they have to press a "submit" button to get results.

Is there a way to make it so they just have to press enter?

Thanks!

TheMadExile · February 2016

SugarCube 2's <<textbox>> macro will forward you to the specified passage when enter/return is pressed, by default. So, if using <<textbox>> is an option and you're processing the player's entered text in the next passage, then just pass it the appropriate passage argument.

If <<textbox>> isn't an option, then you're going to need to specify some details. Specifically, what kind of text input are you using and what does the "submit" button do?

wraithrose · August 2016

This is what I have, as an example:
<<textbox "$action" "" autofocus>><<button "submit">>

<<if $action neq "">>
<<if $action.split(" ").contains("kittens")>>
<<replace "#ActionText">><<print "There are kittens">><</replace>>

<<elseif $action eq "laugh">><<replace "#ActionText">><<print "AHAHAHAHAHAHA">><</replace>>

<<elseif $action eq "cry">><<replace "#ActionText">><<print "WAAAAAHHHHHHHHH">><</replace>>

<<else>><<replace "#ActionText">><<print "Nothing happens.">><</replace>>

<</if>>
<</if>>

<<if $action eq "">><<replace "#ActionText">><<print "Type in the action you'd like to take">><</replace>><</if>>

<</button>>

My issue is that in order to process whatever the player types in the text box, they have to click the submit button -- can I make it so they just have to press enter/return, instead of having to click a button?

Claretta · August 2016

You're really asking how to bind the submit button to the enter key.

http://twinery.org/forum/discussion/6432/running-script-on-keypress-in-a-textarea-sugarcube-2#latest

TheMadExile · August 2016

wraithrose wrote: »

My issue is that in order to process whatever the player types in the text box, they have to click the submit button -- can I make it so they just have to press enter/return, instead of having to click a button?

The input macros are, generally, designed to be passed on to another passage for validation. In particular, if you specify a forwarding passage to <<textbox>>, it will forward upon enter/return.

To validate within the same passage, via either <<click>> or <<button>>, you will instead need to hook enter/return keypresses within the <<textbox>> so that they trigger a click on your <<button>>.

Also, you are doing several unnecessary things within your <<button>> code.

Here's what I'd suggest for your <<textbox>> and <<button>>:

<span class="textenter">\
<<textbox "$action" "" autofocus>> \
<<button "Submit">>

<<if $action eq "">>
	<<replace "#ActionText">>Type in the action you'd like to take.<</replace>>
<<elseif $action.split(" ").contains("kittens")>>
	<<replace "#ActionText">>There are kittens.<</replace>>
<<elseif $action eq "laugh">>
	<<replace "#ActionText">>AHAHAHAHAHAHA<</replace>>
<<elseif $action eq "cry">>
	<<replace "#ActionText">>WAAAAAHHHHHHHHH<</replace>>
<<else>>
	<<replace "#ActionText">>Nothing happens.<</replace>>
<</if>>

<</button>>\
</span>

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

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

Howdy, Stranger!

Categories

Text input box without submit button?

Comments