toLowerCase（）がテキストを逆転させる理由 - なぜですか？

Question

私はtoLowerCase（）を使用して、コンテンツ編集可能なdivを小文字に変換しています。しかしそれはまたテキストを逆転させている！誰かがなぜこれが起こっているのか教えてもらえますか？

$(document).ready(function() { 
 
    $('#user').bind('keyup', function() { 
 
    $(this).text($(this).text().toLowerCase()); 
 
    }); 
 
});

#user { 
 
    background: #f1f1f1; 
 
    padding: 1em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="user" contenteditable="true"></div>

フィドル：https://jsfiddle.net/professorsamoff/8zyvc202/3/

おかげで、 ティム

Answer 1

を用いて達成することができます。 toLowerCase（）はテキストを反転していません（これは関数を削除していることを確認することができ、テキストがまだ反転していることがわかります）。本当に起こっているのは、新しいテキストを配置した後、カーソル位置が最初に移動するということです。

他の回答に記載されているように、これを解決する簡単な方法はcss経由で行うことです。しかし、javascriptだけで行う必要がある場合は、この解決策をチェックしてください。新しいテキストを配置した後、手動でカーソル位置を最後まで移動します。

placeCaretAtEnd関数の実装は、this answerからインスピレーションを受けています。

$(document).ready(function() { 
 
    $('#user').bind('keyup', function() { 
 
    $(this).text($(this).text().toLowerCase()); 
 
    placeCaretAtEnd(this); 
 
    }); 
 
}); 
 

 
function placeCaretAtEnd(el) { 
 
    el.focus(); 
 
    if (typeof window.getSelection != "undefined" 
 
      && typeof document.createRange != "undefined") { 
 
     var range = document.createRange(); 
 
     range.selectNodeContents(el); 
 
     range.collapse(false); 
 
     var sel = window.getSelection(); 
 
     sel.removeAllRanges(); 
 
     sel.addRange(range); 
 
    } else if (typeof document.body.createTextRange != "undefined") { 
 
     var textRange = document.body.createTextRange(); 
 
     textRange.moveToElementText(el); 
 
     textRange.collapse(false); 
 
     textRange.select(); 
 
    } 
 
}

#user { 
 
    background: #f1f1f1; 
 
    padding: 1em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="user" contenteditable="true"></div>

Answer 2

それはブラウザのquirkinessと関係しています...テキストが設定されています、カーソルが編集可能領域の先頭に移動します。

ユーザーが入力中にCSSを使用して小文字に変換することは、あまり風変わりではないかもしれません。その後、JavaScriptをblurイベントで実際の変換を行います。

$(document).ready(function() { 
 
    $('#user').blur(function() { 
 
    console.log('Converting from '+$(this).text()+' to '+$(this).text().toLowerCase()); 
 
    $(this).text($(this).text().toLowerCase()); 
 
    }); 
 
});

#user { 
 
    background: #f1f1f1; 
 
    padding: 1em; 
 
    text-transform:lowercase; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="user" contenteditable="true"></div>

Answer 3

は、これは非常に興味深いものであるCSS

#user { 
 
    background: #f1f1f1; 
 
    padding: 1em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="user" contenteditable="true" style="text-transform: lowercase"></div>

Answer 4

Please try the following: 

$(document).ready(function() { 
    $('#user').bind('keyup', function() { 
     $(this).val($(this).val().toLowerCase()); 
    }); 
});