jquery.app
Nederlands
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML-tools

Gratis contenteditable=plaintext-only Generator

Genereer toegankelijke HTML-markup met contenteditable=plaintext-only voor platte tekstinvoer zonder rijke opmaak.

Tool laden...

Wat is contenteditable=plaintext-only Generator?

Het contenteditable=plaintext-only attribuut maakt een HTML-element dat gebruikers kunnen bewerken, maar in tegenstelling tot contenteditable=true dat rich text formatting accepteert (vet, cursief, kleuren, lettertypen), verwijdert plaintext-only alle opmaak bij plakken. Dit gedrag is ingebouwd in de browser en vereist nul JavaScript.

Snel antwoord

Gebruik contenteditable=plaintext-only om bewerkbare regios te maken die alleen platte tekst accepteren — het plakken van opgemaakte content verwijdert automatisch alle HTML-tags en inline-stijlen. Geen JavaScript nodig. Ondersteund in Chrome 120+, Edge 120+, Safari 17.4+ en Firefox 136+.

Last updated: 2026-06-01

Beperkingen

  • Niet ondersteund in Firefox voor versie 136. Het attribuut degradeert naar contenteditable=true.
  • plaintext-only is een alles-of-niets-benadering — het ondersteunt geen selectieve filtering van opmaak.
  • Browserimplementaties kunnen verschillen in randgevallen zoals witruimte en ongebruikelijke Unicode-tekens bij plakken.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Zo gebruik je deze tool

  1. Kies de editormodus: plaintext-only (verwijdert alle opmaak bij plakken) of regulier contenteditable (behoudt rich text).
  2. Configureer plaatshoudertekst die verschijnt wanneer de editor leeg is en pas de placeholder-CSS aan uw ontwerp aan.
  3. Stel focusstijlen in die worden geactiveerd wanneer de editor focus krijgt. Voeg ARIA-labels toe voor schermlezer-toegankelijkheid.
  4. Kopieer de gegenereerde HTML-opmaak. De tool levert een compleet, zelfstandig fragment met bijbehorende CSS dat fallback-detectie afhandelt.

Waarvoor je het kunt gebruiken

  • Reactievelden en discussieforums waar gebruikers geen opgemaakte tekst moeten kunnen plakken die de paginalay-out breekt of verborgen HTML introduceert.
  • Codefragment-invoeren of configuratie-editors waar platte tekst wordt verwacht en rijke opmaak ongewenste ruis is.
  • Interne notitietools of CMS-platte-tekstbeschrijvingen waar opmaak complexiteit toevoegt zonder voordeel.

Gebruik

Praktische voorbeelden

Voorbeeld

Blog-reactie platte tekstveld

Een blog wil voorkomen dat reageerders opgemaakte tekst met verborgen HTML-tags plakken. Gebruik contenteditable=plaintext-only voor de reactie-invoer. Wanneer een gebruiker een opgemaakte alinea uit Word kopieert en plakt, verwijdert de browser automatisch alle opmaak — het resultaat is schone platte tekst.

Voorbeeld

Configuratie-editor-vergelijking

Een ontwikkeltool heeft twee invoermodi nodig: een WYSIWYG-editor voor rijke beschrijvingen (contenteditable=true) en een platte-tekstveld voor configuratiewaarden (contenteditable=plaintext-only).

Veelgemaakte fouten

  • contenteditable=true gebruiken voor platte-tekstvelden en JavaScript-plak-interceptors schrijven om opmaak te verwijderen — de browser doet dit voor u met plaintext-only.
  • Vergeten ARIA-attributen en toegankelijke labels toe te voegen aan contenteditable-regios — schermlezers behandelen bewerkbare elementen als formulierbesturingselementen.
  • Het fallback-gedrag niet testen in oudere browsers — Firefox voegde plaintext-only toe in versie 136.

Verificatie

  1. Open de gegenereerde HTML in Chrome of Safari. Plak opgemaakte tekst en controleer of alle opmaak is verwijderd en alleen platte tekst overblijft.
  2. Test dezelfde plakbewerking in Firefox 135 of eerder om het fallback-gedrag te bevestigen.

FAQ

Vragen over contenteditable=plaintext-only Generator

Hoe verschilt contenteditable plaintext-only van contenteditable true?

contenteditable=true stelt gebruikers in staat HTML-content te bewerken en opgemaakte tekst te plakken. contenteditable=plaintext-only verwijdert alle opmaak bij plakken. Het onderliggende bewerkingsgedrag is identiek — alleen de plak-afhandeling verschilt.

Welke browsers ondersteunen contenteditable=plaintext-only?

plaintext-only is Baseline 2025, ondersteund in Chrome 120+, Edge 120+, Safari 17.4+ en Firefox 136+. Dit dekt ongeveer 85 procent van het wereldwijde browsergebruik. Voor oudere browsers degradeert het attribuut naar contenteditable=true.

Kan ik sommige opmaak toestaan maar andere blokkeren met plaintext-only?

Nee — plaintext-only is een alles-of-niets-gedrag. Als u selectieve filtering nodig hebt, moet u een aangepaste plak-handler schrijven met het beforeinput-event.

Gerelateerde tools

Meer html-tools

Html

CSP Hash Generator

Genereer CSP-hashwaarden voor inline scripts en styles. Hash exacte code met SHA-256, SHA-384 of SHA-512.

Open tool

Probeer ook

Probeer ook