вывод в Chrome :
<div id="content" contenteditable="true" style="border:1px solid #000;width:500px;height:40px;">
hey
<div>what's up?</div>
<div>
<button id="insert_caret"></button>
Я считаю, что в FF это будет выглядеть примерно так:
hey
<br />
what's up?
и в IE :
hey
<p>what's up?</p>
К сожалению, нет хорошего способа сделать так, чтобы каждый браузер вставлял <br />
вместо div- или p-тега a, или, по крайней мере, я не мог ничего найти в Интернете.
В любом случае, сейчас я пытаюсь сделать следующее: когда я нажимаю кнопку , я хочу, чтобы курсор был установлен в конце текста, поэтому он должен выглядеть примерно так:
hey
what's up?|
каким-либо способом сделать это, чтобы он работал во всех браузерах ?
пример:
$(document).ready(function()
{
$('#insert_caret').click(function()
{
var ele = $('#content');
var length = ele.html().length;
ele.focus();
//set caret -> end pos
}
}
javascript
html
cross-browser
contenteditable
caret
Джош Крозье
источник
источник
Ответы:
Следующая функция сделает это во всех основных браузерах:
Размещение каретки в начале почти идентично: просто требуется изменить логическое значение, передаваемое в вызовы
collapse()
. Вот пример, который создает функции для размещения курсора в начале и в конце:источник
window.getSelection
иdocument.createRange
.createTextRange
Отделение для старых версий Internet Explorer.window.getSelection
не поддерживается 0,29% всех браузеров (IE> 8). см .: caniuse.com/#search=window.getSelectioneditablecontent="true"
...?placeCaretAtEnd(this);
у меня не сработает.К сожалению, отличный ответ Тима сработал для меня только для размещения в конце, а для размещения в начале мне пришлось немного его изменить.
Не уверен , хотя , если
focus()
иselect()
действительно необходимы.источник
Этот (живой) пример показывает короткую простую функцию
setCaretAtStartEnd
, которая принимает два аргумента; (Редактируемый) узел для размещения каретки и логическое значение, указывающее, где его разместить (начало или конец узла)источник
Если вы используете компилятор закрытия Google, вы можете сделать следующее (несколько упрощенное из ответа Тима):
Вот то же самое в ClojureScript:
Я тестировал это в Chrome, Safari и FireFox, не уверен в IE ...
источник