Here’s a simpler example : https://tiddlywiki.com/#%24%3A%2Fcore%2Fui%2FAdvancedSearch%2FFilter%2FFilterButtons%2Fclear
And another one you can try :
\define focus(css)
<$action-sendmessage $message="tm-focus-selector" $param=<<__css__>> />
\end
<$button actions="""<<focus "[placeholder='input1']">>""" >input1</$button>
<$button actions="""<<focus "[placeholder='input2']">>""" >input2</$button>
<$button actions="""<<focus "[placeholder='input3']">>""" >input3</$button>
* <$edit-text placeholder="input1" field="input1"/>
* <$edit-text placeholder="input2" field="input2"/>
* <$edit-text placeholder="input3" field="input3"/>
https://demos.tiddlyhost.com/#Set%20the%20focus%20to%20an%20input
The tm-focus-selector message is sent with the action-sendmessage widget, and the param attribute takes a css selector.
You can right click > inspect to open the dev tools of your browser to see the underlying html structure of the elements on the page and know what CSS selector to use.
On my example, if you right click the text inputs :
As you can see, they have a placeholder attribute. You can target them with CSS with an attribute selector : [placeholder='input1'].
It might be helfpul to add a style tag in your tiddler to test your CSS selector (a macro is not necessary but this can be helpful if you need it often) :
\define testcss(css)
<style>
<<__css__>>{
border:solid 5px green;
}
</style>
\end
This way you can make sure that you are selecting the correct element, e.g :
<<testcss “[placeholder=‘input1’]”>>
If instead you use this : <<testcss “[placeholder]”>>
