Форсировать содержимое нижнего регистра/HTML контента, пригодного для контента div

Question

Есть ли исправление, позволяющее autocapitalize='off' на contenteditable divs вместо использования полей ввода?

Я пробовал это в Javascript с атрибутами и заклинаниями, но ничего не исправляет мою проблему. Если я применяю правило, такое как text-transform: lowercase, это сделает текст, который вы вводите в нижнем регистре, но фактическое значение HTML по-прежнему занимает верхний регистр (если применимо).

Как я могу обеспечить, чтобы все было в нижнем регистре?

Answer 1

На contenteditable blur или focusout вы могли бы заменить содержимое в нижний регистр:

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

Проверить text-transform.

div { 
 
    text-transform: none; 
 
}

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

Answer 3

Вот решение -

Используйте CSS, чтобы ослепить эффект JS для USER-

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

Затем

1. С 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. С 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>