add a clear button to text entry field

47 views
Skip to first unread message

A Gloom

unread,
Sep 7, 2019, 3:22:07 AM9/7/19
to TiddlyWiki
For a clear button for to any text entry field/~EditTextWidget (like the search bar has)

STEP 1:  While the devs aren't looking, steal the close button code from

$:/core/ui/SideBarSegments/search or from below

STEP 2: paste and modify as shown below

__CODE__:

<$button class="tc-btn-rounded"  style="margin-left:10px;">
<$action-setfield $tiddler="$:/temp/kbshortsearch" searchterm="" />
{{$:/core/images/close-button}}
</$button>


* The class "tc-btn-rounded" can be omitted for a square bordered button or replaced with "tc-btn-invisble" for no border.
* "searchterm" is a field name and is usually "text" for a temp tiddler's text field. Set it to the field that the ~EditTextWidget is setting and with its black value, the button deletes (clears) the value the ~EditTextWidget had set.

__With a ~EditTextWidget__:

Search: <$edit-text tiddler='$:/temp/kbshortsearch' field='searchterm'/><$button class="tc-btn-rounded"  style="margin-left:10px;">
<$action-setfield $tiddler="$:/temp/kbshortsearch" searchterm="" />
{{$:/core/images/close-button}}
</$button>

__WORKING EXAMPLE__:

Search: <$edit-text tiddler='$:/temp/kbshortsearch' field='searchterm'/><$button class="tc-btn-rounded"  style="margin-left:10px;">
<$action-setfield $tiddler="$:/temp/kbshortsearch" searchterm="" />
{{$:/core/images/close-button}}
</$button>

Reply all
Reply to author
Forward
0 new messages