Hello! I’m new to Twine, and I need to set a character limit for the text box. I want the text input to be limited to 500 characters. Could you please provide specific steps or suggestions on how to achieve this? Please do not include content from Twine, as I find much of it confusing.
(align:"=====>")+(box:"=====X")[Day: $day] (align:"<==>")+(box:"X====")[Balence: $money]
(align:"===><===")[Journal]
(set: $Journal to " ")
(input-box: 2bind $Journal,"",14,"hello")
(live: 1)[(input: $Journal)]
I think the preferable way is to use a built in HTML attribute called maxlength. The only way I know how to add an attribute to Harlowe’s generated HTML is with JavaScript.
Here is example code for setting the character limit for both (input:) and (input-box:) macros (I noticed you were playing around with both kinds):
(set: $text1 to "")
|limitThis1>[(input-box: bind $text1, "=XX=", 5)]
<script>
const hook = 'limitThis1';
const element = document.querySelector('tw-hook[name="' + hook.toLowerCase() + '"] textarea');
element.maxLength = '500';
</script>
(set: $text2 to "")
|limitThis2>[(input: bind $text2, "=XX=")]
<script>
const hook = 'limitThis2';
const element = document.querySelector('tw-hook[name="' + hook.toLowerCase() + '"] input[type="text"]');
element.maxLength = '500';
</script>
The nice thing about gaining access to the actual HTML element is that you can also affect other HTML attributes, like that annoying spell check. You could add a line, such as:
element.spellcheck = 'false';
The code should be pretty self explanatory, but let us know if you have any other questions.
Note: The character limitation code for the (input:) macro differs from that of the (input-box:) macro. You’ll see it in the querySelector part. Use whichever one is appropriate.
1 Like