Contenteditable vs Input

Contenteditable and Input can be quite similar. Both you can click, then you can change the text inside. So where’s the difference and when should you use which one?

Contenteditable

With contenteditable, you can modify a html snippet. Usually the html on a website is “view-only” meaning you can’t just click somewhere and then edit the html. But as soon as you add the contenteditable attribute to a html-tag, all of the inner html is editable by clicking on it and hitting keys on the keyboard. So for example in:

<body contenteditable=true>
  <h1>Contenteditable</h1>
  <div style="border: 1px solid red; padding: 5px">
    Everything here is editable...
  </div>
</body>

you can edit all the html inside, which would yield:

When is this useful?

If you don’t want to separate the editor-view from the display-view. See example below.
If you want a multiline input that’s wrappable (see example below).
If you want to let a user mess around with the html, but don’t want to provide a wysiwyg.

This example illustrates a usecase of a contenteditable, where it can achieve something that’s not possible with an input. In this case the contenteditable is the bold title. See how it wraps around the buttons? Good luck achieving that with an input.

Many words of caution

However, you also should be cautious with contenteditableas there are a few pitfalls.

Take care if you want to store the edited string to a database and it should be a simple string, not html.

In this case you should either resort to the input field or take special precautions. In case you want still want to head down this road, here are some some things to bear in mind:

Different browsers will handle contenteditable differently. For example, Firefox sometimes adds a <br> tag to the edited content, whereas chrome doesn’t.
The user could copy/paste some html into the contenteditable area. For example try to select and copy this into the contenteditable above.

Due to those reasons, you should definitely process the html before storing it into your database. One possibility to process / sanitize the html would be:

var sanitized = htmlElt.textContent || htmlElt.innerText;

This will ensure you only get the text of the content.

What about security?

Well, you can try it for yourself: Copy/Paste this

<script>alert('hi')</script>

into the contenteditable above. As you can see, it’s escaped properly.

Input

The input field on the other hand has its use in the following cases:

Forms
One-line editing of a string, overflow is hidden.
One-line editing of a number.
Restricted input.

Conclusion

It’s not always easy to choose which one to use. The basic rule of thumb would be

Contenteditable to edit html
Input to edit strings or numbers

You should only break this rule if you have very special needs, as in the usecase above, where the contenteditable was used to minimize the differencebetween editor/input and display and wrap the content around the buttons.

출처 : https://www.bersling.com/2017/02/20/contenteditable-vs-input/

저작자표시 비영리 변경금지

'Javascript' 카테고리의 다른 글

JDBC와 DBCP의 차이 (0)	2018.03.27
X-Frame-Options' to 'sameorigin'. 오류 (0)	2018.03.08

코딩 + 일기

Contenteditable 와 Input 차이

Contenteditable vs Input