TiddlyWiki5/editions/tw5.com/tiddlers/widgets/EditTextWidget.tid

title: EditTextWidget
created: 201310241419
modified: 20150220162131000
tags: Widgets
caption: edit-text

! 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, the edit text widget generates a `<textarea>` as the HTML editing element when the `text` field is edited, and a `<input type="text">` element otherwise. This behaviour can be overridden with the `tag` and `type` attributes.

! Content and Attributes

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

|!Attribute |!Description |
|tiddler |The tiddler to edit (defaults to the [[current tiddler|Current Tiddler]]) |
|field |The field to edit (defaults to `text`). Takes precedence over the `index` attribute |
|index |The index to edit |
|default |The default text to be provided when the target tiddler doesn't exist |
|class |A CSS class to be assigned to the generated HTML editing element |
|placeholder |Placeholder text to be displayed when the edit field is empty |
|focusPopup |Title of a state tiddler for a popup that is displayed when the editing element has focus  |
|focus |Set to "true" to automatically focus the editor after creation  |
|tag |Overrides the generated HTML editing element tag. Use `textarea` for a multi-line editor |
|type |Overrides the generated HTML editing element `type` attribute |
|size |The size of the input field (in characters) |
|autoHeight |Either "yes" or "no" to specify whether to automatically resize `textarea` editors to fit their content (defaults to "yes") |
|minHeight |Minimum height for automatically resized `textarea` editors, specified in CSS length units such as "px", "em" or "%" |

! 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|TemplateTiddlers]] 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.