强制小写内容/ contenteditable div的HTML

Question

Is there a fix to allow autocapitalize='off' on contenteditable divs instead of using input fields?

I've been trying it out in Javascript with attributes and spellchecks, but nothing seems to fix my problem. If I apply a rule such as text-transform: lowercase , this will make the text you type lowercase, but the actual HTML value is still uppercase (where applicable).

How do I ensure it is all lowercase?

Answer 1

On contenteditable blur or focusout you could replace the content to lowercase:

 var editable = document.querySelectorAll('[contenteditable]'); function toLower(){ this.innerHTML = this.innerHTML.toLowerCase(); } [].forEach.call(editable, function(el){ el.addEventListener("focusout", toLower); }); 

 <div contenteditable>THis is some Sample Capital Text</div> 

Answer 2

Check text-transform .

 div { text-transform: none; } 

 <div contenteditable>here is the text</div> 

Answer 3

Here is the solution -

Use CSS to blind the JS effect for user-

*[contenteditable]{
    text-transform:lowercase;
}

Then,

1. With Native JS-

   JS-

    function changeCase(id){ var txt = document.getElementById(id); txt.innerText = txt.innerText.toLowerCase() } 

   HTML-

    <div contenteditable onBlur="changeCase('myId')" id="myId">This is Camelcase Text. Type something on me to see effects</div> 

2. With Jquery-

   JS-

    $('[contenteditable]').on('blur',function(e){ $(this).text($(this).text().toLowerCase()); }); 

   HTML-

    <div contenteditable>This is Camelcase Text. Type something on me to see effects</div>