58
edits
Editor with widgets: Difference between revisions
→SPAN contentEditable='false' are contained in editable area
| (27 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
== | = Problem= | ||
HTML5 introduced an ability to make entire HTML document or its part editable. However [http://www.w3.org/TR/html5/editing.html#contenteditable specification] didn't provide complete documentation defining behaviour of HTML elements inside of editable area. Especially it concerns to HTML forms where the spec has few lines only. It leads to many things can be treated in different ways in question. So it's necessary to provide well-defined rules because this will allow to achieve compatibility between user agents. For example HTML form elements behaves differently in different versions of IE and Mozilla editor doesn't work well enough with them at all. So currently form elements are outsiders of editable world of HTML documents. | |||
This article is designed to define behavior of editor used for editable HTML documents on user actions. | |||
==Application area== | ==Application area== | ||
# | Now editor is used in HTML authoring tools. With using HTML form controls will be possible to develope: | ||
# | # authoring tools for WYSIWYG development data entry forms. An example of the tool is Microsoft Office InfoPath. | ||
# authoring tools for semistructured (loosely structured) forms. Semistructured forms can be constructed via HTML by placing XForms controls inside editable area. An example of application area of semistructured forms are clinical documents. Clinical document authoring tool can be used for developing clinical documents with providing easy-to-use interfaces. | |||
The specification is corresponding with behavior of Microsoft Internet Explorer 6,7,8 and Microsoft Office InfoPath 2003. | |||
==Examples== | ==Examples== | ||
| Line 18: | Line 16: | ||
* Simple WYSIWYG XForms editors | * Simple WYSIWYG XForms editors | ||
= Proposal= | |||
==Widgets in containers with contentEditable attribute== | ==Widgets in containers with contentEditable attribute== | ||
The common approach - the behavior of widgets is the same with the HTML specification. But in HTML widgets are in the static place and in the editor widgets is a part of editing text, it is possible to cut, copy and paste widgets by clipboard. | The common approach - the behavior of widgets is the same with the HTML specification. But in HTML widgets are in the static place and in the editor widgets is a part of editing text, it is possible to cut, copy and paste widgets by clipboard. | ||
===Common behavior for all type of widgets in editable area=== | |||
===Common behavior for all type of widgets in | # if the caret is directly before/after the widget, then pressing right/left arrow key instead of next right/left caret's position to focus on the widget | ||
# if the caret is directly before/after the widget then instead of next right/left caret's position | |||
# if the caret is directly before/after a widget then pressing of delete/backspace key is removing the widget | # if the caret is directly before/after a widget then pressing of delete/backspace key is removing the widget | ||
# if the widget has focus then pressing of delete/backspace key is removing the widget | # if the widget has focus then pressing of delete/backspace key is removing the widget | ||
===SELECT=== | ===SELECT=== | ||
# if the widget has focus then pressing down/up key should change current value of widget's text field from widgets list. When the last/first list's value is achieved then the following pressing up/down key has no affects. | # if the widget has focus then pressing down/up key should change current value of widget's text field from widgets list. When the last/first list's value is achieved then the following pressing up/down key has no affects. | ||
# mouse click on widget's text field should move focus to it and open widget's menu | # mouse click on widget's text field should move focus to it and open widget's menu | ||
# double click should open and close widget's menu | # double click should open and close widget's menu, i.e. action analogous to two single clicks is executed | ||
===BUTTON=== | ===BUTTON=== | ||
# if button has no focus then mouse click on button should move focus to button and execute onclick handler | |||
# if button has no focus then mouse click on button should move | |||
===INPUT type="text"=== | ===INPUT type="text"=== | ||
# if caret is directly before/after the text field then pressing right/left key should move caret into widget's text field in the first/last position of the field's content. If the widget's content is larger then text field should be scrolled | # if caret is directly before/after the text field then pressing right/left key should move caret into widget's text field in the first/last position of the field's content. If the widget's content is larger then text field should be scrolled | ||
# if caret is in the first/last position of the field's content then pressing left/right key moves caret to directly before/after the widget. | # if caret is in the first/last position of the field's content then pressing left/right key moves caret to directly before/after the widget. | ||
# if caret is in the widget then pressing delete/backspace key can remove only field's content. If content is empty then nothing happens. | # if caret is in the widget then pressing delete/backspace key can remove only field's content. If content is empty then nothing happens. | ||
# mouse click on text field moves focus to widget and moves caret on field's content. If mouse click is on the field but there is no content in this place then the caret moves to the last position of the content. | # mouse click on text field moves focus to widget and moves caret on field's content. If mouse click is on the field but there is no content in this place then the caret moves to the last position of the content. | ||
# double click and click on text field should moves the focus to widget | # double click and click on text field should moves the focus to widget | ||
===INPUT type="radio"=== | ===INPUT type="radio"=== | ||
# double click and click on the widget moves focus to widget and sets the value of 'checked' attribute to 'true' | # double click and click on the widget moves focus to widget and sets the value of 'checked' attribute to 'true' | ||
# if the widget has focus then pressing delete/backspace key the widget should be removed | # if the widget has focus then pressing delete/backspace key the widget should be removed | ||
===INPUT type="checkbox"=== | ===INPUT type="checkbox"=== | ||
# | # click on the widget moves focus to widget and sets the value of 'checked' attribute to inverse value | ||
# double | # double click on the widget moves focus to widget and sets the value of 'checked' attribute to inverse value twice (in fact the attribute doesn't change), i.e. action analogous to two single clicks is executed | ||
# if the widget has focus then pressing Delete/Backspace key the widget should be removed | # if the widget has focus then pressing Delete/Backspace key the widget should be removed | ||
| Line 74: | Line 62: | ||
# widgets in selection should be copied, cut, pasted as part of the selection | # widgets in selection should be copied, cut, pasted as part of the selection | ||
=== SPAN contentEditable='false' are contained in editable area=== | |||
=== SPAN | All content of element SPAN with contentEditable='false' attribute is treated as a word. All elements and contols inside element have normal behaviour. Element is selected with all content as one element. | ||
# span can be removed | # span can be removed by Backspace or Del keys. | ||
# span can't have focus but widgets in span can have focus | # span can't have focus but widgets in span can have focus | ||
# if span is | # if span is in selection and try to remove selection then content of the selection will be removed with span (see bullet 1) | ||
# span can | # operations Undo can be applied for removed span | ||
# span can is copied into clipboard | |||
# if caret is directly before/after the span then pressing right/left key should move caret directly after/before span. | # if caret is directly before/after the span then pressing right/left key should move caret directly after/before span. | ||
# when in multiline editable field Up/Down is pressed and in the next line under caret there is the span then caret should be moved to position directly before or after span (it depends on which place is closer). | # when in multiline editable field Up/Down is pressed and in the next line under caret there is the span then caret should be moved to position directly before or after span (it depends on which place is closer). | ||
==Bugs== | ==Bugs== | ||
Tested on FF 3.5, 3.7 a1, Windows XP, Intel Atom | |||
===SELECT=== | ===SELECT=== | ||
| Line 104: | Line 89: | ||
===INPUT type="checkbox"=== | ===INPUT type="checkbox"=== | ||
# widget doesn't handle any events. As the result it is impossible to change the valued of checked attribute ( | # widget doesn't handle any events. As the result it is impossible to change the valued of checked attribute ([http://hgaid.ispvds.com/mozilla_editor_with_widgets/firefox4.html video]) | ||
# if in the element DIV with contentEditable='true' there is SPAN with contentEditable='false' and in SPAN there is INPUT type=checkbox and the caret is directly after SPAN then caret disappears after pressing the Left key. | # if in the element DIV with contentEditable='true' there is SPAN with contentEditable='false' and in SPAN there is INPUT type=checkbox and the caret is directly after SPAN then caret disappears after pressing the Left key. After next pressing Left key the caret will appears directly before SPAN ([http://hgaid.ispvds.com/mozilla_editor_with_widgets/firefox7.html video]) | ||
===INPUT type="radio"=== | ===INPUT type="radio"=== | ||
| Line 112: | Line 97: | ||
===TABLE=== | ===TABLE=== | ||
# if in the table's cell there is only one widget the there is no way to move caret into cell | # if in the table's cell there is only one widget the there is no way to move caret into cell | ||
===Common=== | ===Common=== | ||