Disable the border, contenteditable, and designMode when WebKit textarea can be resized and the focus of the text box is disabled.

As we all know, the default Effect of textarea in WebKit browsers (Safari and chrome) is different from that in other browsers. For example, textarea can be dragged to adjust the size, and the border turns yellow when the focus is on. These effects are really cool, but sometimes we don't need them. What should we do? In fact, you can use CSS to easily cancel these effects.

 

1. undrag and resize

Textarea {<br/> resize: none; <br/>}

 

2. The border color remains unchanged during Focus

Textarea: Focus {<br/> outline: none; <br/>}

Http://luolonghao.javaeye.com/blog/673774

 

3. Differences between contenteditable and designMode

 

You can use contenteditable and designMode to implement visual editing. Contenteditable was initially implemented on IE. Later, major browsers gradually supported contenteditable, and HTML5 standards also included contenteditable. DesignMode can only change the document to an editable state, but contenteditable can change any HTML element to an editable state. The application scope is wider than that of designMode, and the use of contenteditable will be a trend in the future.

However, in IE, The designMode and contenteditable are not exactly the same, but there are many slight differences. We need to pay special attention when developing a visual editor.

1. If you use designMode on IE and call document. domain, no permission error is reported. contenteditable does not.

2. Use designMode on ie. the right-click menu does not have the copy or paste function, and the right-click menu of a common webpage is displayed.

3. Use contenteditable on IE6 and IE7. In some cases, the focus is automatically moved to the editing area, similar to the focus () effect. This problem is terrible, because we often do not want the focus to jump to the editing area during page initialization.