Estoy usando TextInput para un proyecto y quería DESHABILITAR cualquier tipo de selección de texto o acciones como (cortar/copiar/pegar/compartir) como se comparte en la captura de pantalla a continuación.
No puedo encontrar nada en la documentación oficial de react-native
Debes agregar 2 atributos
selectTextOnFocus y editable
Por ejemplo:
<TextInput editable={false} selectTextOnFocus={false} />
-
Editable false – Ni siquiera puedo editar la entrada de texto ahora – Los necesito cuando puedo editar pero no puedo copiar/cortar/pegar en esta entrada de texto
– firebolt_ash
20 de marzo de 2017 a las 6:41
-
cuando doy el editable falso, ¿cómo puedo usar TextInput? Quiero desactivar la opción de copiar/pegar sin necesidad de dar editable={false}
– saiRam89
21 de julio de 2017 a las 9:29
Solo dale a tu entrada de texto el atributo editable={false}
balasubramaniano
contextMenuHidden es impedir que el usuario pegue texto en ciertos campos y ocultar el menú contextual.
Actualizar:
Esto aún no se ha incluido en una versión. Siempre puede ver en qué versión se encuentra cualquier compromiso haciendo clic en el Enlace y mirando las etiquetas. así que no esperaría que tuviera una versión estable hasta la 0.55.
<TextInput contextMenuHidden={true} />
Verifique el compromiso aquí: Agregar opción para ocultar el menú contextual para TextInput
-
Estoy usando react-native v0.54.0 y no pude hacerlo funcionar con esto.
–Mateo Guzman
23 de marzo de 2018 a las 16:32
-
@MateoGuzmán actualizó la respuesta.
– Balasubramanian
24 de marzo de 2018 a las 7:04
-
Parece que se puso en 55.4 pero no funciona para Android. ¿Alguien más puede hacer que esto funcione en ambas plataformas?
– nabos
1 jun 2018 a las 20:29
-
Este método no funciona en Android. ¿Encontró alguna solución para evitar la opción Copiar/Pegar en Android?
– M.Kalidass
7 de enero de 2022 a las 6:09
Brillar
Colocar punteroEventos a ninguno en el padre View de TextInput para deshabilitar los eventos táctiles, considere el siguiente ejemplo:
<View pointerEvents="none">
<TextInput ... />
</View>
linhadiretalipe
Puede usar una Vista y usar removeClippedSubviews={true} (funciona con Android) y use contextMenuHidden={true} (funciona con IOS)
<View removeClippedSubviews={true}>
<TextInput contextMenuHidden={true} />
</View>
Referencia del siguiente número
https://github.com/facebook/react-native/issues/33697
const App = () => {
const [selection, setSelection] = useState(null);
const [text, setText] = useState('');
return (
<TextInput
selection={selection}
onSelectionChange={(e) => setSelection(e.nativeEvent.selection)}
value={text}
onChangeText={(text) => setText(text)}
style={{ alignSelf: 'center', width: 200, marginTop: 50, backgroundColor: 'grey' }}
/>
);
};
La siguiente solución me funciona para evitar copiar/pegar. Estoy limpiando el teclado en el evento onTouchEnd
const [text1, setText1] = useState('')
const clearClipboard = () =>{
Clipboard.setString('')
}
const onChangeText = (text) =>{
//For android 12+ clipboard autofill option, dont allow text change more than one char..which means user is typing.
if(text1.length+1 >= text.length){
setText1(text)
}
}
<TextInput onChangeText={onChangeText} value={text1} contextMenuHidden={true} onTouchEnd={clearClipboard}></TextInput>
usar el atributo de solo lectura?
– mehulmpt
19 de marzo de 2017 a las 7:10
Use caretHidden={true} si desea deshabilitar todas las operaciones como Cortar Pegar Copiar. También ocultará el cursor.
– Anil Chahal
22 de enero de 2018 a las 7:42