2013-10-02 10 views
5

Devo trovare un modo per impedire agli utenti di selezionare il testo in un'area di testo. L'obiettivo è creare una tastiera personalizzata che sia utilizzata per inserire il testo nell'area di testo. Voglio che gli utenti siano in grado di fare clic sulla textarea per impostare la posizione del punto di inserimento (che sta già funzionando in questo momento). Tuttavia, non voglio che gli utenti siano in grado di selezionare alcune parti del testo inserito, o almeno non ci dovrebbe essere alcuna indicazione visiva di questo. Ho già provato alcune cose, come il seguente CSS, ma senza successo.Disattiva la selezione del testo nell'area testo

textarea { 
    -moz-user-select: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    user-select: none; 
} 

La soluzione può essere in CSS e/o JavaScript e deve funzionare solo in Google Chrome. Grazie!

UPDATE:

La disattivazione del textarea non funziona per me. Come ho detto, voglio che gli utenti siano in grado di posizionare il cursore in determinate posizioni facendo clic sulla posizione. Se disabilitassi la textarea, questa funzionalità andrebbe persa.

@OPUS: Questa soluzione non funziona con textareas. @andi: giusto @Pointy: gli eventi della tastiera possono essere bloccati. Gli utenti non devono inserire testo con la tastiera, ma con una tastiera personalizzata che offro sulla pagina. Confrontalo con una tastiera su schermo. @downvoters: cosa c'è di male in questa domanda?

+0

A meno che io sto leggendo questo sbagliato, non sarebbe disabilitato fare quello che vuoi? –

+0

http://stackoverflow.com/questions/4712030/disable-text-selection-and-add-exceptions –

+0

Disabilitare la selezione del testo è facile ...stai davvero chiedendo come disabilitare la selezione del testo mentre permetti agli utenti di fare clic per posizionare il cursore in un punto specifico? – andi

risposta

4
<textarea unselectable="on" id="my_textarea"></textarea> 

    *.unselectable { 
    -webkit-user-select: none; 
    } 
+0

Non ha alcun effetto in Firefox. – Pointy

+1

questo perché l'utente lo vuole solo in chrome. Possiamo aggiungere moz-user-select: none –

+1

oops mi dispiace, mi sono perso, e hai anche ragione che '-moz-user-select: none' funziona! Penso che questa sia la risposta giusta. – Pointy

-2

È possibile disabilitarlo con javascript:

document.getElementById("textarea").disable='true'; 
-3
<textarea disabled="readonly"></textarea> 

testata si sta lavorando.

+1

L'OP non vuole rendere la textarea di sola lettura, vorrebbe solo che la funzionalità di selezione fosse disabilitata. – Amyth

+0

disabilitando la textarea, la selezione del testo può essere effettuata –

+0

@AnkurDhanuka disabilitando l'elemento si impedirà la generazione di eventi della tastiera, quindi probabilmente non funzionerà per l'OP. – Pointy

7

Una combinazione delle proprietà "readonly" e "user-select" funziona.

La seconda regola disattiva il bordo evidenziato su select, che è un tipo di selezione visiva.

La proprietà "non selezionabile" sembra essere specifica Opera/IE.

gli stili:

.noselect { 
    cursor: default; 
    -webkit-user-select: none; 
    -webkit-touch-callout: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    -o-user-select: none; 
} 

.noselect:focus { 
    outline: none; 
} 

la marcatura:

<textarea class="noselect" readonly="readonly" unselectable="on"></textarea> 

sola lettura potrebbe essere più adatto di disabile (si possono ancora attivare con JS, su evento click).

-1

Oppure si può semplicemente mettere disabled = "disabilitato" in textarea, in questo modo:

<textarea disabled="disabled"></textarea>

0

Di seguito il codice può aiutare a

codice JS:

$(document).ready(function(){ 
    $('#txtInput').bind("cut copy paste",function(e) { 
     e.preventDefault(); 
    }); 
}); 
Problemi correlati