Disabling suggestions dropdown for <<textbox>>

Hello folks! (SugarCube 2.30.0)

Just yesterday I was testing a game and went to type in a textbox, and a dropdown appeared below it with a suggestion. It’s never done that before. How would this be disabled? I’ve tried this:

<<script>> $('.macro-textbox').each(function () { this.autocomplete = false; }); <</script>>\

It didn’t throw an error that I could see, but it didn’t get rid of the dropdown; I’m thinking the dropdown is a different setting.

Thanks!

Try this.autocomplete = "off" instead of false, maybe?

That was the first one I tried. :grin: I also tried autosuggest, and while that didn’t throw a noticeable error either it also did nothing.

Hmm. I’m not sure how to get around that. For some reason, autocomplete is one of those stupid things that should be controlled by CSS but isn’t (the same way that preventing images from being dragable isn’t). Because of that, I’m not sure how to go about adding autocomplete if you can’t just do it the way that you’re attempting. :confused: Hopefully someone else knows a trick that I don’t.

Yes, I’ve also been wondering how to universally turn off draggability for a long time (I’ve also been inconvenienced by draggable images on other sites: I think a lot of people would appreciate an easy way to turn it off).

Yeah. You can disable text highlighting in CSS (even though every browser has a slightly modified attribute name, so you have to write like 8 lines of CSS to flip a bit), but not image dragging. Don’t those seem like they should to hand in hand? HTML and CSS has come a long way, but every now and then I’m like “Really, guys? This is still a thing? Really?!”

This seems to work actually, for disabling draggability:

<<script>> $('img').each(function () { this.draggable = false; }); <</script>>\

I thought I had tried it before, but maybe it works inconsistently. Of course you have to run it again whenever a new image is added to the passage, and I think I’ve already found some inconsistency in it working in such cases.

You need to wait for the rendering process to complete, like always. So put the script inside a <<timed 0s>> macro.

I had it in PassageDone; Ill try the <<timed>>.
[Later: Still nothing.]

Tried this from another website:

The only way to turn it off in Chrome is by tricking the browser by using an unsupported value. For example:
autocomplete=“dumb”
https://grizzly.co/writing/styling-disabling-autocomplete/

Still not disabling it.

Here’s a picture of the dropdown (it kept vanishing whenever I tried a screenshot, so I took it with my camera).
P5290131

Incidentally, in Inspect, I see that when the dropdown appears it is adding the class “focus-visible” and adding “data-focus-visible-added” to the end of the input tag. If I switch to another tab and back these remain (the textbox is still in focus), but the dropdown disappears.

Hmm… but in another game the textbox doesn’t add those things when the textbox comes in focus. It’s using SugarCube 2.31.0.

I created a <<textboxPlus>> widget which should make doing what you want a lot easier.

Once you add that widget, all you’d need in the passage is:

<<textboxPlus "Label: " "$varName" `{ autocomplete: "off" }`>>

See that link for all of the other options it has.

Hope that helps! :smiley:

P.S. If it doesn’t show up, then you may need to hit CTRL+F5 to refresh the page in your cache.

1 Like

Got interrupted by a birthday project, but once I got to try it (and got used to the different syntax after a few errors), this has indeed solved the problem! Thank you again!