2013-07-25 9 views
7

Sto tentando di duplicare in qualche modo la funzionalità "correzione automatica" presente in programmi come Outlook di Microsoft Office.imposta il cursore sulla posizione specifica su una riga specifica in un'area di testo

Per cominciare, ogni volta che un utente digita "A" (la lettera A e uno spazio) all'inizio di una riga voglio cambiare il testo in "* Agente ["

ho scritto la di sotto del quale funziona bene se si sta digitando nella textarea dall'alto verso il basso. Ma se si digita in qualsiasi altro punto nell'area di testo, il testo viene modificato, quindi il cursore si sposta alla fine della textarea.

Desidero che il cursore sia sempre posizionato alla fine del testo modificato.

ho il numero di riga che è stata modificata nella variabile currentLineNumber e so che il cursore deve essere dopo il carattere 8 ° in quella linea, ma non sono sicuro di come per dirgli di andare là

Idealmente id come a qualcosa come

function setCursor(row, position) { 
//.... code to set cursor 
} 

Cosa posso fare per realizzare questo? Sono aperto a una soluzione javascript o jQuery (anche se trovo jQuery un po 'difficile da leggere e capire)

Se c'è un modo migliore per ottenere ciò di cui ho bisogno in generale, sono aperto anche a questo.

Ecco un jsFiddle se non si capisce il problema

+0

possibile duplicato di [Imposta posizione del cursore nella casella di testo html] (http://stackoverflow.com/questions/512528/set-cursor-position-in-html-textbox) –

risposta

10

Ho aggiornato il vostro violino vedi: http://jsfiddle.net/eghpf/2/

ho var currentPosition che viene utilizzato in questo metodo aggiunto

function setSelectionRange(input, selectionStart, selectionEnd) { 
    if (input.setSelectionRange) { 
    input.focus(); 
    input.setSelectionRange(selectionStart, selectionEnd); 
    } 
    else if (input.createTextRange) { 
    var range = input.createTextRange(); 
    range.collapse(true); 
    range.moveEnd('character', selectionEnd); 
    range.moveStart('character', selectionStart); 
    range.select(); 
    } 
} 

Che viene da questo jQuery Set Cursor Position in Text Area

Cosa succede (è il motivo per cui il curso r è sempre sull'ultima posizione); è quando chiami $('#systemNotesbuilder').val(arrayOfLines.join("\n")); l'intero valore viene sovrascritto con un nuovo valore posizionando il cursore dopo quel nuovo valore. La chiamata per impostare il cursore è (e dovrebbe) essere dopo quella chiamata.

+0

Grazie mille. Era molto meno doloroso di quanto stavo aspettando e posso capire come funziona. perfezionare! – DelightedD0D