The contenteditable “plaintext-only” attribute value combination is now Baseline Newly available  |  Blog  |  web.dev

Stay organized with collections

Save and categorize content based on your preferences.

Published: Mar 20, 2025

When you want to allow the user to enter plaintext information, your first instinct might be to reach for a </code>. This works for many cases and requires no special effort to make it work with forms, but also has limitations.</p> <p>One example is growing the <code translate="no" dir="ltr"><textarea/></code> dynamically with the content without resolving to <a href="https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/">hacks</a>. There’s <a href="https://developer.mozilla.org/docs/Web/CSS/field-sizing#content"><code translate="no" dir="ltr">field-sizing: content</code></a>, but it has limited browser support. This is where the <code translate="no" dir="ltr">contenteditable="plaintext-only"</code> attribute value combination comes in. You can add it to generic elements like <code translate="no" dir="ltr"></p> <div>, and have the element automatically take care of resizing.</p> <p>Another limitation is styling. The <a href="https://developer.mozilla.org/docs/Web/API/CSS_Custom_Highlight_API">CSS Custom Highlight API</a> provides a mechanism for styling arbitrary text ranges on a document by using JavaScript to create the ranges, and CSS to style them. A <code translate="no" dir="ltr"><textarea/></code> internally uses a <code translate="no" dir="ltr"></p> <div> in the user agent shadow root, which is why styling the text with the CSS Custom Highlight API doesn't work. If used on an element like a <code translate="no" dir="ltr"></p> <div> directly that you have made <code translate="no" dir="ltr">contenteditable</code>, the CSS Custom Highlight API works just fine.<br /> <devsite-code></p> <pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded="" syntax="HTML"><code translate="no" dir="ltr"> <p>Edit me</p> <script><![CDATA[ const parentNode = document.querySelector('div').firstChild; const range = new Range(); range.setStart(parentNode, 0); range.setEnd(parentNode, 3); const highlight = new Highlight(range); CSS.highlights.set('highlight', highlight); ]]></script> </code></pre> <p></devsite-code></p> <p><img decoding="async" src="https://web.dev/static/blog/contenteditable-plaintext-only-baseline/devtools.png" alt="Chrome DevTools Elements panel inspecting a textarea showing that it's using a div in a user-agent shadow root." srcset="https://web.dev/static/blog/contenteditable-plaintext-only-baseline/devtools_36.png 36w,https://web.dev/static/blog/contenteditable-plaintext-only-baseline/devtools_48.png 48w,https://web.dev/static/blog/contenteditable-plaintext-only-baseline/devtools_72.png 72w,https://web.dev/static/blog/contenteditable-plaintext-only-baseline/devtools_96.png 96w,https://web.dev/static/blog/contenteditable-plaintext-only-baseline/devtools_480.png 480w,https://web.dev/static/blog/contenteditable-plaintext-only-baseline/devtools_720.png 720w,https://web.dev/static/blog/contenteditable-plaintext-only-baseline/devtools_856.png 856w,https://web.dev/static/blog/contenteditable-plaintext-only-baseline/devtools_960.png 960w,https://web.dev/static/blog/contenteditable-plaintext-only-baseline/devtools_1440.png 1440w,https://web.dev/static/blog/contenteditable-plaintext-only-baseline/devtools_1920.png 1920w,https://web.dev/static/blog/contenteditable-plaintext-only-baseline/devtools_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"/></p> <p>Here's a screenshot of the <a href="https://contenteditable-textarea.glitch.me/">demo</a> that shows this limitation. Note how the text in the <code translate="no" dir="ltr"><textarea/></code> isn't styled, but the text in the two <code translate="no" dir="ltr">contenteditable</code> generic <code translate="no" dir="ltr"></p> <div> elements is.</p> <p><img decoding="async" src="https://web.dev/static/blog/contenteditable-plaintext-only-baseline/demo.png" alt="Demo showing how the CSS Custom Highlight API only works with the contenteditable div elements, but not the textarea." srcset="https://web.dev/static/blog/contenteditable-plaintext-only-baseline/demo_36.png 36w,https://web.dev/static/blog/contenteditable-plaintext-only-baseline/demo_48.png 48w,https://web.dev/static/blog/contenteditable-plaintext-only-baseline/demo_72.png 72w,https://web.dev/static/blog/contenteditable-plaintext-only-baseline/demo_96.png 96w,https://web.dev/static/blog/contenteditable-plaintext-only-baseline/demo_480.png 480w,https://web.dev/static/blog/contenteditable-plaintext-only-baseline/demo_720.png 720w,https://web.dev/static/blog/contenteditable-plaintext-only-baseline/demo_856.png 856w,https://web.dev/static/blog/contenteditable-plaintext-only-baseline/demo_960.png 960w,https://web.dev/static/blog/contenteditable-plaintext-only-baseline/demo_1440.png 1440w,https://web.dev/static/blog/contenteditable-plaintext-only-baseline/demo_1920.png 1920w,https://web.dev/static/blog/contenteditable-plaintext-only-baseline/demo_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"/></p> </div> <p> <devsite-thumb-rating position="footer"><br /> </devsite-thumb-rating></p> <p><devsite-content-footer class="nocontent"></p> <p>Except as otherwise noted, the content of this page is licensed under the <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 License</a>, and code samples are licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache 2.0 License</a>. For details, see the <a href="https://developers.google.com/site-policies">Google Developers Site Policies</a>. Java is a registered trademark of Oracle and/or its affiliates.</p> <p>Last updated 2025-03-20 UTC.</p> <p></devsite-content-footer></p> <p><devsite-notification><br /> </devsite-notification></p> <p> <template class="devsite-content-data-template"><br /> [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-03-20 UTC."],[],[]]<br /> </template></p> <p> <devsite-panel/></p> <p> <devsite-sitemask/><br /> <devsite-snackbar/><br /> <devsite-tooltip/><br /> <devsite-heading-link/><br /> <devsite-analytics></p> <p> </devsite-analytics></p> <p> <devsite-badger/></p> <p> <devsite-a11y-announce/><br /> </code></p> </div> <p></code></div> <p></code></p> </div> <p></code></p> </div> <p><br /> <br /><a href="https://web.dev/blog/contenteditable-plaintext-only-baseline?hl=en">Source link </a></p> </div><!-- .entry-content --> <footer class="entry-footer"> </footer><!-- .entry-footer --> <nav class="navigation post-navigation" aria-label="Posts"> <h2 class="screen-reader-text">Post navigation</h2> <div class="nav-links"><div class="nav-previous"><a href="https://allianceuniversal.com/learning-go-loops-and-conditionals/" rel="prev"><span class="nav-subtitle"><i class="fas fa-angle-double-left"></i>Previous:</span> <span class="nav-title">Learning GO: Loops and Conditionals</span></a></div><div class="nav-next"><a href="https://allianceuniversal.com/how-soon-after-a-mortgage-closing-can-you-apply-for-a-new-credit-card/" rel="next"><span class="nav-subtitle">Next:<i class="fas fa-angle-double-right"></i></span> <span class="nav-title">How soon after a mortgage closing can you apply for a new credit card?</span></a></div></div> </nav> </div> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/the-contenteditable-plaintext-only-attribute-value-combination-is-now-baseline-newly-available-blog-web-dev/#respond" style="display:none;">Cancel reply</a></small></h3><form action="https://allianceuniversal.com/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Comment <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required>

Name *