wyjście w 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>
Wierzę, że w FF wyglądałoby to mniej więcej tak:
hey
<br />
what's up?
aw IE :
hey
<p>what's up?</p>
niestety nie ma dobrego sposobu na zrobienie tego tak, że każda przeglądarka wstawia <br />
zamiast tagu div lub p, a przynajmniej nie mogłem znaleźć niczego w Internecie.
W KAŻDYM razie próbuję teraz zrobić, gdy naciskam przycisk , chcę, aby daszek był ustawiony na końcu tekstu, więc powinien wyglądać mniej więcej tak:
hey
what's up?|
jakikolwiek sposób to zrobić, aby działał we wszystkich przeglądarkach ?
przykład:
$(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
Josh Crozier
źródło
źródło
Odpowiedzi:
Następująca funkcja zrobi to we wszystkich głównych przeglądarkach:
Umieszczenie karetki na początku jest prawie identyczne: wystarczy zmienić wartość logiczną przekazaną do wywołań na
collapse()
. Oto przykład, który tworzy funkcje do umieszczania daszka na początku i na końcu:źródło
window.getSelection
idocument.createRange
.createTextRange
Oddział jest dla starszych wersji programu Internet Explorer.window.getSelection
nie jest obsługiwane przez 0,29% wszystkich przeglądarek (IE> 8). zobacz: caniuse.com/#search=window.getSelectioneditablecontent="true"
...?placeCaretAtEnd(this);
nie zadziała dla mnie.Niestety doskonała odpowiedź Tima zadziałała u mnie tylko w przypadku umieszczenia na końcu, aby ustawić na początku musiałem ją nieco zmodyfikować.
Nie jestem pewien, ale jeśli
focus()
iselect()
są rzeczywiście potrzebne.źródło
Ten (na żywo) przykład przedstawia krótką prostą funkcję
setCaretAtStartEnd
, która pobiera dwa argumenty; Węzeł (edytowalny) do umieszczenia karetki i wartość logiczna wskazująca, gdzie go umieścić (początek lub koniec węzła)źródło
Jeśli korzystasz z kompilatora zamknięcia Google, możesz wykonać następujące czynności (nieco uproszczone na podstawie odpowiedzi Tima):
Oto to samo w ClojureScript:
Przetestowałem to w Chrome, Safari i FireFox, nie jestem pewien co do IE ...
źródło