Question

是否允许在autocapitalize='off' div上使用contenteditable而不是使用输入字段？

我一直在Javascript中尝试使用属性和拼写检查，但似乎没有什么能解决我的问题。如果我应用text-transform: lowercase之类的规则，这将使您键入的文本小写，但实际的HTML值仍为大写（如果适用）。

如何确保全部小写？

Answer 1

在可信的blur或focusout上，您可以将内容替换为小写：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

检查text-transform。

div {
  text-transform: none;
}

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

Answer 3

这是解决方案 -

使用CSS来隐藏用户的JS效果 -

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

然后，

使用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>

使用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>

强制contenteditable div的小写内容/ HTML

3 个答案: