Ho div con testo e contenteditable = "true". Quando clicco su questo div - funziona alcuni miei script, non è molto importante. E quando faccio doppio clic su questo div - è necessario modificare il testo in div. Il testo di modifica deve essere solo dopo il doppio clic, non dopo il singolo. E molto importante, quando faccio doppio clic su div - caret deve rimanere sotto il cursore del mouse. Non è necessario il testo di selezione. Ho trovato alcuni script per singolo/doppio. Ma hai un problema. Quando faccio doppio clic su div - il testo è la selezione. Selezione non necessaria. Hai bisogno di un editor di caret dove ho fatto clic. Non capisco come. http://jsfiddle.net/X6auM/Selezione del testo in div (contenteditable) quando si fa doppio clic
risposta
Ogni browser principale corrente fornisce un'API per creare un intervallo da un evento del mouse, sebbene siano necessari quattro rami di codice diversi.
Ecco alcuni retroscena:
- https://stackoverflow.com/a/10659990/96100
- https://stackoverflow.com/a/12705894/96100
- Creating a collapsed range from a pixel position in FF/Webkit
Ecco una demo: http://jsfiddle.net/timdown/krtTD/10/
Ed ecco qualche codice:
function getMouseEventCaretRange(evt) {
var range, x = evt.clientX, y = evt.clientY;
// Try the simple IE way first
if (document.body.createTextRange) {
range = document.body.createTextRange();
range.moveToPoint(x, y);
}
else if (typeof document.createRange != "undefined") {
// Try Mozilla's rangeOffset and rangeParent properties,
// which are exactly what we want
if (typeof evt.rangeParent != "undefined") {
range = document.createRange();
range.setStart(evt.rangeParent, evt.rangeOffset);
range.collapse(true);
}
// Try the standards-based way next
else if (document.caretPositionFromPoint) {
var pos = document.caretPositionFromPoint(x, y);
range = document.createRange();
range.setStart(pos.offsetNode, pos.offset);
range.collapse(true);
}
// Next, the WebKit way
else if (document.caretRangeFromPoint) {
range = document.caretRangeFromPoint(x, y);
}
}
return range;
}
function selectRange(range) {
if (range) {
if (typeof range.select != "undefined") {
range.select();
} else if (typeof window.getSelection != "undefined") {
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
}
}
document.getElementById("editor").ondblclick = function(evt) {
evt = evt || window.event;
this.contentEditable = true;
this.focus();
var caretRange = getMouseEventCaretRange(evt);
// Set a timer to allow the selection to happen and the dust settle first
window.setTimeout(function() {
selectRange(caretRange);
}, 10);
return false;
};
È incredibile! Ieri ho fatto alcuni altri metodi. Ma non funziona molto bene. La tua versione funziona bene. Grazie! –
$('p').dblclick(function(event) {
$this = $(this);
$this.attr('contenteditable', "true");
$this.blur();
$this.focus();
});
Un suggerimento, la tua risposta sarebbe completa se hai spiegato anche quello che stavi facendo. –
- 1. Ottieni il testo selezionato in DIV ContentEditable?
- 2. Doppio clic su un div con contenteditable inside e iframe disabilita div
- 3. Selezione di tutto il testo nell'input di testo HTML quando si fa clic su
- 4. Come ottenere la parola selezionata quando si fa doppio clic su div, p, span?
- 5. nascondere DIV quando si fa clic su di esso
- 6. sostituisce il testo selezionato in div contenteditable
- 7. Cambia colore DIV quando si fa clic su un altro DIV
- 8. Come evitare l'attivazione dell'evento con un solo clic quando si fa doppio clic su extjs
- 9. .exe si chiude immediatamente dopo l'avvio quando si fa doppio clic su
- 10. Come seleziono tutto il testo quando si fa clic su una vista Modifica testo?
- 11. Come selezionare tutto il testo in div contenteditable?
- 12. Bug in fosuserbundle quando si fa doppio clic sul link di conferma?
- 13. Non sai come nascondere un div quando si fa clic al di fuori della div
- 14. L'evento click del controllo utente non funziona quando si fa clic sul testo all'interno del controllo?
- 15. Firefox contentEditable div focus issues
- 16. Disabilita scorrimento Quando si fa clic su un collegamento
- 17. come nascondere div con jquery quando si fa clic ovunque, tranne un div?
- 18. mostra elemento quando si fa clic e si nasconde di nuovo quando non attivo
- 19. Inserimento mathjax in div contentEditable
- 20. stop mouseleave quando si fa clic su un oggetto
- 21. Inserire l'immagine in "contenteditable" div utilizzando popup
- 22. perché viene generato l'evento DataGrid MouseDoubleClick quando si fa doppio clic sulla barra di scorrimento?
- 23. Quando si fa clic sulla tastiera del tasto chiaro di uitextfield non scompare il testo
- 24. come disabilitare gli elementi in div contenteditable?
- 25. "Impossibile trovare la classe principale" quando si fa doppio clic sul file .jar
- 26. Dati di aggiornamento (JQuery) quando si fa clic sul pulsante
- 27. IE 8 sposta il testo del pulsante di input quando si fa clic su
- 28. ng-clic fa ancora fuoco quando div è (ng) disabilitato
- 29. Il cursore di Firefox invisibile, diventa visibile quando si fa clic su qualsiasi altra cosa
- 30. Come modificare il colore dell'immagine e del testo quando si fa clic utilizzando react-native?
singolo-click-to modificare è il risultato atteso per il 'elemento contenteditable'. Se si desidera utilizzare il doppio clic, impostare 'contenteditable' * only * quando si fa doppio clic sull'elemento. Una volta modificabili, concentrati sull'elemento, quindi imposta il punto di inserimento in base alla posizione del mouse dall'evento doppio clic. Infine, quando l'attenzione è persa, disabilita 'contenteditable'. – Jay
Non capisco come posizionare il cursore esattamente nel punto in cui era presente un clic. Questo con .focus(). Ma il caret va all'inizio della linea. http://jsfiddle.net/jupUh/ –
Come posso trovare la posizione del segno di omissione se non è stato in div? –