JavaScript: The Definitive Guide, Sixth Editio javaScript权威指南(第6版) pdf 文字版-文字版, javascript电子书, 和javascript 有关的电子书:

15.10.4 Editable Content

The selectionStart and selectionEnd properties are not supported in IE8 or earlier.

15.10.4 Editable Content

We’ve seen that HTML form elements include text fields and textarea elements that allow the user to enter and edit plain text. Following the lead of IE, all current web browsers also support simple HTML editing functionality: you may have seen this in use on pages (such as blog comment pages) that embed a rich-text editor that includes a toolbar of buttons for setting typographic styles (bold, italic), setting justification, and inserting images and links.

There are two ways to enable this editing functionality. Set the contenteditableHTML attribute of any tag or set the contenteditableJavaScript property on the corresponding Element to make the content of that element editable. When the user clicks on the content inside that element, an insertion cursor will appear and the user’s keystrokes will be inserted. Here is an HTML element that creates an editable region:

Click to edit

Browsers may support automatic spell-checking for form fields and contenteditable elements. In browsers that support this, checking may be on by default or off by default. Add the spellcheck attribute to explicitly turn checking on in browsers that support it. And use spellcheck=false to explicitly disable checking (when, for example, awill display source code or other content with identifiers that do not appear in dictionaries).

You can also make an entire document editable by setting the designMode property of the Document object to the string “on”. (Set it to “off” to revert to a read-only document.) The designMode property does not have a corresponding HTML attribute. You might make the document within an // Empty iframe

All current browsers support contenteditable and designMode. They are less compatible, however, when it comes to their actual editing behavior. All browsers allow you to insert and delete text and move the cursor using the mouse and keyboard. In all browsers, the Enter key begins a new line, but different browsers produce different markup. Some begin a new paragraph and others simply insert a

Some browsers allow keyboard shortcuts such as Ctrl-B to convert the currently selected text to bold. In other browsers (such as Firefox), standard word processor shortcuts such as Ctrl-B and Ctrl-I are bound to other, browser-related functions and are not available to the text editor.

Browsers define a number of text-editing commands, most of which do not have keyboard shortcuts. To execute these commands, you instead use the execCommand()method of the Document object. (Note that this is a method of the Document, not of the element on which the contenteditable attribute is set. If a document contains more than one editable element, the command applies to whichever one holds the selection or the insertion cursor.) Commands executed by execCommand() are named by strings such as “bold”, “subscript”, “justifycenter,” or “insertimage”. The command name is the first argument to execCommand(). Some commands require a value argument— “createlink”, for example, requires the hyperlink URL. In theory, if the second argument to execCommand() is true, the browser will automatically prompt the user for whatever value is required. For portability, however, you should prompt the user

15.10 Other Document Features | 409

yourself, pass false as the second argument, and pass the value as the third argument. Here are two example functions that perform edits using execCommand():

function bold() { document.execCommand("bold", false, null); }

function link() {

var url = prompt("Enter link destination");

if (url) document.execCommand("createlink", false, url); }

The commands supported by execCommand() are typically triggered by buttons in a toolbar. A good UI will disable buttons when the command they trigger is not available. Pass a command name to document.queryCommandSupported() to find out if it is supported by the browser. Call document.queryCommandEnabled() to find out if the command can currently be used. (A command that expects a selected range of text, for example, might be disabled when there is no selection.) Some commands, such as the “bold” and “italic” commands, have a boolean state and can be on or off depending on the current selection or cursor location. These commands are typically represented with a toggle button in a toolbar. Use document.queryCommandState() to determine the current state of such a command. Finally, some commands, such as “fontname,” have an associated value (a font family name). Query this value with document.queryCommand Value(). If the current selection includes text using two different font families, the value of “fontname” will be indeterminate. Use document.queryCommandIndeterm() to check for this case.

Different browsers implement different sets of editing commands. A few, such as “bold”, “italic”, “createlink”, “undo,” and “redo”, are well supported.6 The HTML5 draft current at the time of this writing defines the following commands. Because they are not universally supported, however, they are not documented here in any detail:

bold insertLineBreak selectAll
createLink insertOrderedList subscript
delete insertUnorderedList superscript
formatBlock insertParagraph undo
forwardDelete insertText unlink
insertImage italic unselect
insertHTML redo

If you need rich-text editing functionality for your web application, you will probably want to adopt a prebuilt solution that addresses the various differences between browsers. A number of such editor components can be found online.7 It is worth noting that the editing functionality built into browsers is powerful enough to allow a user to enter small amounts of rich text, but it is too simple for any kind of serious document editing. In particular, note that the HTML markup generated by these editors is likely to be quite messy.

  1. See for a list of interoperable commands.
  2. The YUI and Dojo frameworks include editor components. A list of other choices can be found at http: // .

Once the user has edited the content of an element that has the contenteditable attribute set, you can use the innerHTML property to obtain the HTML markup of the edited content. What you do with that rich text is up to you. You might store it in a hidden form field and send it to a server by submitting the form. You might use the techniques described in Chapter 18 to send the edited text directly to a server. Or you might use the techniques shown in Chapter 20 to save the user’s edits locally.

15.10 Other Document Features | 411

友情链接It题库(| 版权归yishouce.com所有| 友链等可联系|粤ICP备16001685号-1