Perché in questo esempio http://jsfiddle.net/JksKx/8/ div è perso il cursore quando scrivo il testo? Come risolvere un simile comportamento?Soppressione contenuto modificabile con binding personalizzato
6
A
risposta
15
L'evento keyup viene attivato e scritto sul viewmodel, che attiva la funzione di aggiornamento dell'associazione personalizzata. Questo sta riportando l'innerHTML all'elemento, il che sta causando la perdita di concentrazione.
Una soluzione semplice consiste nel controllare la funzione di aggiornamento se l'elemento.innerHTML è già uguale al valore su cui si desidera impostarlo.
http://jsfiddle.net/rniemeyer/JksKx/9/
ko.bindingHandlers.htmlValue = {
init: function(element, valueAccessor, allBindingsAccessor) {
ko.utils.registerEventHandler(element, "keydown", function() {
var modelValue = valueAccessor();
var elementValue = element.innerHTML;
if (ko.isWriteableObservable(modelValue)) {
modelValue(elementValue);
}
else { //handle non-observable one-way binding
var allBindings = allBindingsAccessor();
if (allBindings['_ko_property_writers'] && allBindings['_ko_property_writers'].htmlValue) allBindings['_ko_property_writers'].htmlValue(elementValue);
}
}
)
},
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor()) || "";
if (element.innerHTML !== value) {
element.innerHTML = value;
}
}
};
3
potrebbe desiderare di cambiare keydown a keyup, ma a parte questo funziona davvero bene =)
ko.utils.registerEventHandler(element, "keyup", function() {
Problemi correlati
- 1. Log4net - Soppressione "eccezione" dall'aggiunta a "PatternLayout" personalizzato
- 2. personalizzato booleano Parameter Binding
- 3. HTML - Carattere newline nel contenuto DIV modificabile?
- 4. Contenuto HTML5 paragrafo modificabile dopo la lista
- 5. Contenuto HTML div modificabile: selezionare evento testo
- 6. Datagrid modificabile in WPF
- 7. Chiama standard Binding a eliminazione diretta da un binding personalizzato
- 8. Orario modificabile con Drupal
- 9. Binding ContentControl Content per contenuto dinamico
- 10. ASP.Net MVC Modello personalizzato Descrizione del binding
- 11. Configurazione del contenuto per notifica e-mail modificabile Jenkins
- 12. Binding del contenuto di una Span
- 13. WinRT Dipendente controllo personalizzato proprietà Setting/Binding
- 14. Android DataBinding personalizzato Binding adattatore Attenzione
- 15. C# Custom CheckBox + Tipo di binding personalizzato
- 16. Inserire valori in PDF modificabile con PHP e tenerlo modificabile
- 17. Come aggiungere contenuto non modificabile nell'intestazione di fisarmonica bootstrap angolare?
- 18. Soppressione uscita
- 19. ListView con widget cliccabile/modificabile
- 20. ListBox WPF modificabile
- 21. Soppressione dell'uscita cout con una funzione
- 22. Soppressione dell'eliminazione di entità con associazioni
- 23. WPF ComboBox modificabile
- 24. CKEditor Inserisci HTML non modificabile con stile
- 25. Tipo di contenuto personalizzato: la registrazione con IANA è obbligatoria?
- 26. MarkupEstensione con parametri di binding
- 27. Soppressione degli avvisi PDO
- 28. Wrap CKEditor Contenuto WYSYWG con HTML aggiuntivo (non modificabile) per applicare la formattazione specifica dell'elemento
- 29. ComboBox modificabile
- 30. checkstyle + filtri di soppressione
Due cose che ho notato in questa contenteditable vincolante: 1. Assicurarsi che i dati -bind non è all'interno di un elemento con attributo contenteditable. L'elemento con contenteditable non attiva l'evento chiave. 2. Se l'utente fa clic destro su elemento e incolla il testo, questo non aggiornerà il valore. anche l'evento click dovrebbe essere assegnato. Inoltre, se si utilizzano pulsanti come "grassetto", l'evento click deve essere associato al corpo o qualcosa del genere. –
L'utilizzo della messa a fuoco sembra funzionare per eventi di clic "in grassetto" e altri simili. ko.utils.registerEventHandler (elemento, "focus", updateHandler); – Piercy