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

Source: Internet
Author: User

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/>}



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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.