What the next gen #TextArea should look like for #HTML5, Draft Concept

Below is the draft concept of what I think the expanded API for a richer textarea should look like.

By using getselectedvalue and setselectedvalue, the web developer will be able to build new prototypes to do things like add: bold, strong, italics, emphasis, paragraph, pre, blockquote, and more, without much effort.

Tool bars will be completely up to the developer.

The real benefit, if W3C were to implement this, is that we can stop using iframes for richtext editors. It is such a hack job to abuse the browser that way.

If I get enough positive feedback, I can see writing an RFC to submit to W3C.

Interface Type Return Type Interface Name Description
Property bool acceptreturn Gets or sets a value that indicates how the text editing control responds when the user presses the ENTER key.
Property bool accepttab Gets or sets a value that indicates how the text editing control responds when the user presses the TAB key.
Property bool allowdrop Gets or sets a value indicating whether this element can be used as the target of a drag-and-drop operation. This is a dependency property.
Property bool autowordselection Gets or sets a value that determines whether when a user selects part of a word by dragging across it with the mouse, the rest of the word is selected.
Property bool canredo Gets a value that indicates whether the most recent undo action can be redone.
Property bool canundo Gets a value that indicates whether the most recent action can be undone.
Property string class CSS Class Name
Property bool disabled Can receive either ‘disabled’ or true, to disable.
Property string id Element Identity
Property string lang Gets or sets localization/globalization language information that applies to an element.
Property string name Name of element
Property int selectlength Length of the selected text
Property int startselectposition Start point of the selected text.
Property string style Gets or sets the style used by this element when it is rendered.
Property int tabindex Gets or sets a value that determines the order in which elements receive focus when the user navigates through controls by using the TAB key.
Property   type

Gets or set the type of data contained in the textArea

  • text, ASCII, Unicode – These would all be unformatted text. The difference is that text would handle any text, ASCII would only be 7 or 8 bit ASCII characters, and Unicode would be only Unicode characters.
  • HTML, MarkUp – HTML would support all HTML code, including embedded JavaScript and CSS. But MarkUp would eliminate the JavaScript support.
  • MarkDown – AKA BBS formatting. MarkDown has become a highly popular way for shorthand formatted text entry. Made popular through WikiMedia and other CMS.
Property * value Gets or sets the inner content of the TextArea. Text and MarkDown formats return as string, HTML returns as an HTML Object
Function void copy Copies the current selection of the text editing control to the Clipboard.
Function void cut Removes the current selection from the text editing control and copies it to the Clipboard.
Function void paste Copies contents of the clipboard into the textArea.
Function void redo Undoes the most recent undo command. In other words, redoes the most recent undo unit on the undo stack./td>
Function void selectall Selects all the contents of the text editing control.
Function void getselectvalue() Gets the value of the selected area using the same rules as value property.
Function void setselectvalue() Replaces selected area with the contents passed into SetSelectedValue()
Function string toString Returns the string representation of a Control object.
Function void Undo Undoes the most recent undo command. In other words, undoes the most recent undo unit on the undo stack.
Event   addEventListener() Allows the registration of event listeners on the event target (IE8 = attachEvent())
Event   altKey Returns whether or not the “ALT” key was pressed when an event was triggered
       
Event   bubbles Returns whether or not an event is a bubbling event
       
Event   button Returns which mouse button was clicked when an event was triggered
Event   cancelable Returns whether or not an event can have its default action prevented
       
Event   clientX Returns the horizontal coordinate of the mouse pointer, relative to the current window, when an event was triggered
Event   clientY Returns the vertical coordinate of the mouse pointer, relative to the current window, when an event was triggered
Event   ctrlKey Returns whether or not the “CTRL” key was pressed when an event was triggered
Event   currentTarget Returns the element whose event listeners triggered the event
Event   handleEvent() Called whenever an event occurs of the event type for which the EventListener interface was registered
Event   initEvent() Specifies the event type, whether or not the event can bubble, whether or not the event’s default action can be prevented
Event   initKeyboardEvent() Initializes the value of a KeyboardEvent object
Event   initMouseEvent() Initializes the value of a MouseEvent object
Event   initTouchEvent() Initializes the value of a MouseEvent object
Event   keyIdentifier Returns the identifier of a key
Event   keyLocation Returns the location of the key on the device
Event   metaKey Returns whether or not the “meta” key was pressed when an event was triggered
Event   onabort The event occurs when the loading of a resource has been aborted
Event   onafterprint The event occurs when a page has started printing, or if the print dialogue box has been closed
Event   onbeforeprint The event occurs when a page is about to be printed
Event   onclick The event occurs when the user clicks on an element
Event   oncontextmenu The event occurs when the user right-clicks on an element to open a context menu
Event   oncopy The event occurs when the user copies the content of an element
Event   oncut The event occurs when the user cuts the content of an element
Event   ondblclick The event occurs when the user double-clicks on an element
Event   onDragEnter Occurs when the input system reports an underlying drag event with this element as the drag target.
Event   onDragLeave Occurs when the input system reports an underlying drag event with this element as the drag origin.
Event   onDragOver Occurs when the input system reports an underlying drag event with this element as the potential drop target.
Event   onDrop Occurs when the input system reports an underlying drop event with this element as the drop target.
Event   onerror The event occurs when an error occurs while loading an external file
Event   onhashchange The event occurs when there has been changes to the anchor part of the current URL.
Event   onkeydown The event occurs when the user is pressing a key
Event   onkeypress The event occurs when the user presses a key
Event   onkeyup The event occurs when the user releases a key
Event   onload The event occurs when an object has loaded
Event   onmousedown The event occurs when a user presses a mouse button over an element
Event   onmouseenter The event occurs when the pointer is moved onto an element
Event   onmouseleave The event occurs when the pointer a user moves the mouse pointer out of an element
Event   onmousemove The event occurs when the pointer is moving while it is over an element
Event   onmouseout The event occurs when a user moves the mouse pointer out of an element, or out of one of its children
Event   onmouseover The event occurs when the pointer is moved onto an element, or onto one of its children
Event   onmouseup The event occurs when a user releases a mouse button over an element
Event   ontouchdown The event occurs when a user presses a mouse button over an element
Event   ontouchenter The event occurs when the pointer is moved onto an element
Event   ontouchleave The event occurs when the pointer a user moves the mouse pointer out of an element
Event   ontouchup The event occurs when a user releases a mouse button over an element
Event   onpaste The event occurs when the user pastes some content in an element
Event   onresize The event occurs when a document view is resized
Event   onscroll The event occurs when a document view is scrolled
Event   onunload The event occurs once a page has unloaded (for <body> and <frameset>)
Event   preventDefault() To cancel the event if it is cancelable, meaning that any default action normally taken by the implementation as a result of the event will not occur
Event   relatedTarget Returns the element related to the element that triggered the event
Event   removeEventListener() Allows the removal of event listeners on the event target (IE8 = detachEvent())
Event   screenX Returns the horizontal coordinate of the mouse pointer, relative to the screen, when an event was triggered
Event   screenY Returns the vertical coordinate of the mouse pointer, relative to the screen, when an event was triggered
Event   shiftKey Returns whether or not the “SHIFT” key was pressed when an event was triggered
Event   stopPropagation() To prevent further propagation of an event during event flow
Event   target Returns the element that triggered the event

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.