This page is part of a static HTML representation of the TiddlyWiki at https://tiddlywiki.com/

EditTextWidget

30th November 2020 at 6:47pm
Widgets

Introduction

The edit text widget provides a user interface in the browser for editing text tiddler fields. The editing element is dynamically bound to the underlying tiddler value: changes to the tiddler are instantly reflected, and any edits are instantly propogated.

By default, applying the EditTextWidget to the text field of a tiddler will generates an HTML <textarea> element, i.e. a multi-line editor. Applying the EditTextWidget to any other field generates an HTML <input type="text"> element, a single-line editor. This behaviour can be overridden with the tag and type attributes.

Content and Attributes

The content of the <$edit-text> widget is ignored.

AttributeDescription
tiddlerThe tiddler to edit (defaults to the current tiddler)
fieldThe field to edit (defaults to text). Takes precedence over the index attribute
indexThe index to edit
defaultThe default text to be provided when the target tiddler doesn't exist
classA CSS class to be assigned to the generated HTML editing element
placeholderPlaceholder text to be displayed when the edit field is empty
focusPopupTitle of a state tiddler for a popup that is displayed when the editing element has focus
focusSet to "yes" or "true" to automatically focus the editor after creation
tabindexSets the tabindex attribute of the input or textarea to the given value
autocomplete New in: 5.1.23 An optional string to provide a hint to the browser how to handle autocomplete for this input
tagOverrides the generated HTML editing element tag. For a multi-line editor use tag=textarea. For a single-line editor use tag=input
typeOverrides the generated HTML editing element type attribute
sizeThe size of the input field (in characters)
autoHeightEither "yes" or "no" to specify whether to automatically resize textarea editors to fit their content (defaults to "yes")
minHeightMinimum height for automatically resized textarea editors, specified in CSS length units such as "px", "em" or "%"
rowsSets the rows attribute of a generated textarea
cancelPopups New in: 5.1.23 if set to "yes", cancels all popups when the input gets focus
inputActions New in: 5.1.23 Optional actions that are triggered every time an input event occurs within the input field or textarea
refreshTitle New in: 5.1.23 An optional tiddler title that makes the input field update whenever the specified tiddler changes
disabled New in: 5.1.23 Optional, disables the text input if set to "yes". Defaults to "no"

Notes

One trap to be aware of is that the edit text widget cannot be used to edit a field of the tiddler that contains it. Each keypress results in the tiddler being re-rendered, which loses the cursor position within the text field.

Instead, place the edit text widget in a template that references the tiddler you want to modify.

For example, if you wanted the tiddler GettingStarted to edit the value of the "myconfig" field of the tiddler "AppSettings", you might do so by creating a separate tiddler "ChangeAppSettings" that contains the following:

<$edit-text tiddler="AppSettings" field="myconfig"/>

And reference the template in any other tiddler (e.g. GettingStarted) with {{ChangeAppSettings}}.

This works when your use of the tiddler is not the AppSettings itself which would cause a recursion problem. In this latter case you have to save the fields to a temporary (or alternative) tiddler (sort of the reverse of above) like so:

<$edit-text tiddler="StoreAppSettings" field="myconfig"/>

In short the EditTextWidget can not change properties of the tiddler it is embedded in or part of. It can only change fields of other tiddlers. One could use ShadowTiddlers to accomplish the field storage if needed.