ホームページ >ウェブフロントエンド >jsチュートリアル >ブラウザ間で一貫して「contenteditable」Pre要素のテキストの末尾にキャレットを配置する方法
contenteditable要素を使用すると、ユーザーは要素内でテキストを直接編集できます。ただし、改行の処理方法にはブラウザ間で不一致が発生する可能性があります。
contenteditableの出力要素はブラウザによって異なります。Chrome では
<div>が配置されます。改行内に、Firefox は
<br />を挿入し、Internet Explorer は
<p>を追加します。
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(); } }
$(document).ready(function() { $('#insert_caret').click(function() { placeCaretAtEnd($('#content')); } });
以上がブラウザ間で一貫して「contenteditable」Pre要素のテキストの末尾にキャレットを配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。