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

title: EditTextWidget
created: 201310241419
modified: 201407250837
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 CurrentTiddler) |
|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  |
|tag |Overrides the generated HTML editing element tag |
|size |The size of the input field (in characters) |
|type |Overrides the generated HTML editing element `type` attribute |

! 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 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"/>
```
Lots and lots and lots of docs updates Now we've got up-to-date skeleton documentation for all the widgets 2013-10-31 22:03:40 +00:00			`title: EditTextWidget`
			`created: 201310241419`
Reorganise docs updates for 5.1.5 additions We’ll keep the docs for the new features in the prerelease edition until the release of 5.1.5. This means that we can continue to build the tw5.com edition without including the 5.1.5-specific content. 2014-10-25 13:24:01 +00:00			`modified: 201407250837`
More mangling of reference docs 2014-09-10 23:06:19 +00:00			`tags: Widgets`
			`caption: edit-text`
Lots and lots and lots of docs updates Now we've got up-to-date skeleton documentation for all the widgets 2013-10-31 22:03:40 +00:00
			`! 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 \|`
Fix bad links 2014-10-10 20:06:48 +00:00			`\|tiddler \|The tiddler to edit (defaults to the CurrentTiddler) \|`
Lots and lots and lots of docs updates Now we've got up-to-date skeleton documentation for all the widgets 2013-10-31 22:03:40 +00:00			\|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 \|`
Reorganise docs updates for 5.1.5 additions We’ll keep the docs for the new features in the prerelease edition until the release of 5.1.5. This means that we can continue to build the tw5.com edition without including the 5.1.5-specific content. 2014-10-25 13:24:01 +00:00			`\|tag \|Overrides the generated HTML editing element tag \|`
Enhance height control for edit-text widget Added the option to disable automatic resizing, and the ability to specify the minimum height. 2014-10-25 09:09:17 +00:00			`\|size \|The size of the input field (in characters) \|`
Reorganise docs updates for 5.1.5 additions We’ll keep the docs for the new features in the prerelease edition until the release of 5.1.5. This means that we can continue to build the tw5.com edition without including the 5.1.5-specific content. 2014-10-25 13:24:01 +00:00			\|type \|Overrides the generated HTML editing element `type` attribute \|
Updated docs for the edit text widget 2014-07-25 12:09:30 +00:00
			`! 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.`

Fix bad links 2014-10-10 20:06:48 +00:00			`Instead, place the edit text widget in a [[template\|TemplateTiddlers]] that references the tiddler you want to modify.`
Updated docs for the edit text widget 2014-07-25 12:09:30 +00:00
			`For example, if you wanted 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"/>`
			```