0 votes
by (680 points)

Hello! I'm using SugarCube 2 & Twine 2, and I've been using the simple ol'...

<<textbox"$name""""show name">>

to give my players the option to select their own name. I was wondering if it were possible to use the control macro <<if>>, or some other to limit them from creating unnecessary and long names? 

 

 

2 Answers

+1 vote
by (159k points)
selected by
 
Best answer

note: I suggest you add a space character (white-space) between the parameters of you macros, it makes them easier to read and the Macro Arguments documentation states that you should do this.

<<textbox "$name" "" "show name">>

There is a HTML5 maxlength attribute you could (programatically) add to the HTML input element created by the <<textbox>> macro which can be used to restrict the maximum number of characters that can be entered into it, unfortunately that attribute is not fully supported by all web-browsers.

You could also programatically added an event handle to the same HTML input element to monitor each key-press and then use code to remove any extra characters after the maximum allowed.

The following is one possible way to achieve the above, a more experienced Javascript programmer might have a better solution.

1. How to determine the ID of the HTML input element generated by the <<textbox>> macro:

By default SugarCube generates the ID of such an element by adding "textbox-" to the name of the variable being passed as the first parameter, which in your example is "name". You can also use your web-browser's built-in Developer tools to Inspect the relevant element to see it's ID.

eg. The ID of element generated by your example would be "textbox-name".

2. How to programatically modify an HTML element generated by a <<macro>>:

The HTML elements aren't accessible until after the Passage has been fully processed which means you need to delay your modifications until after the elements have been rendered, and one way to do this is to create a single use Task Object.

The following shows how to do this within the current Passage, for this example I will be using the postrender task.

<<set $name to "">>
<<textbox "$name" "" "show name">>

<<script>>
postrender["Limit Name"] = function (content, taskName) {
	delete postrender[taskName];

	/* Modification code goes here. */

};
<</script>>

... note the delete command being used to force the task to only occur for this Passage.

3. How to access the correct input element within the postrender task:

You can use jQuery and it's find() function to local the relevant element like so:

$(content).find("#textbox-name")

...note the inclusion of a # character at the start of the value being passed to the find() function, this informs the function that the supplied value is an element ID.

4. How to use the JQuery attr() function to set the value of an element's maxlength attribute to a value like 10:

element.attr("maxlength", 10)

5. How to use the JQuery .keyup() function to add a key-press event handler to an element:

element.keyup(function(event) {
	/* Modification code goes here. */
});

 

If you put all the above together with some Javascript that monitors the length of the element's current value and modifies that value if it's too long then the result would look like the following, which limits the maximum number of characters allowed to 10.

<<set $name to "">>
<<textbox "$name" "" "show name">>

<<script>>
postrender["Limit Name"] = function (content, taskName) {
	delete postrender[taskName];

	$(content).find("#textbox-name")
		.attr("maxlength", 10)
		.keyup(function(event) {
			if (event.target.value.length > 10) {
				event.target.value = event.target.value.substring(0, 10);
			}
		});		
};
<</script>>

... if you want to change the maximum number of characters allowed you would simply change each of the three occurrence of the number 10 to another value, making sure its the same value in all three places

0 votes
by (2.9k points)
I am not sure what your problem is, maybe if you re phrase it I may be able to help you.
...