Password asterisks instead of letters in textbox?

Twine 2.35 (Sugarcube)

Hi guys just wondering if anyone knows if it’s possible to make user input in a textbox come up (display) as asterisks rather than letters? I’m trying to work on a local versus game but it’s important that opponents can’t see what you’re typing in.

Thanks so much!

Hrm. You want an <input type="password"> element instead of an <input type="text"> one…doesn’t look like there’s a great way to create one, but you can change the type after the fact:

<<textbox "$varName" "">>\
<<run $(document).on(':passagedisplay', function() {$('#textbox-varname').prop('type', 'password')})>>

Note the all-lowercase “varname” in the JavaScript code…


1 Like

Absolutely legendary Josh, thanks so much!!!

Just so people as noobish as me can understand (I’m including my future self! ;P) …I’m assuming you’re saying that regardless of what uppercase or lowercase letters I use for the variable name in the textbox variable, I have to refer to it by all lowercase inside the <> tags cos Javascript only uses lowercase or something?

Either way it works like a charm! Thanks again!

Basically, SugarCube sets the ID of the textbox based on the variable name. If you need to make sure you use the right ID, play that page in your browser, right-click the textbox, do “Inspect element”, and you can see the ID used there.

If you use a temporary variable instead of a story variable, then there will be two dashes after the “textbox” part of the ID.

Hope that helps. :slight_smile:


Thanks actually that’s super helpful!