0

Quizás la pregunta sea muy básica, pero soy nuevo en React y HTML.

Tengo un textarea y un label de texto de manera que el input escrito en el textarea es automaticamente mostrado en el label. Adjunto el código:

class JuegoTeclado extends Component {

constructor(props) {
    super(props)
    this.state = {
        newTask: "",
    }
}

handleChange = (event) => {
    this.setState({
        newTask: event.target.value,
    })
}

render() {

    return(
        <div>
            <h1 className="juego-teclado-title"> <span aria-label="emoji" role="img">✏️</span> ¡Practica ahora! Escribe y comprueba <span aria-label="emoji" role="img">✏️</span></h1>
            <textarea onChange={this.handleChange} type="text" className="juego-teclado-input" />


               <p className="test-label">{this.state.newTask}</p>
            </div>
        );
    }
}

export default JuegoTeclado;

El problema es que quiero que funcione dentro de un componente con unas medidas concretas y fijas de manera que las palabras no se salgan de un marco. Adjunto una foto: introducir la descripción de la imagen aquí

El texto está justificado y el margen lateral funciona, pero no sé cómo limitar el textarea para no salirme del cuadrado naranja por abajo de manera que si quiero escribir más allá de esta línea no me deje. Le he puesto un max-height pero lo ignora, asi que imagino que puedo conseguirlo limitando el número de carácteres del text area. Saludos.

4
  • ¿Porque no usas un input type="text" directamente?
    – RafaelM
    Commented el 18 mar. 2021 a las 11:53
  • @RafaelM podría hacerlo, pero a efectos prácticos es lo mismo Commented el 18 mar. 2021 a las 11:55
  • 2
    el elemento textarea tiene un atributo maxlength Commented el 18 mar. 2021 a las 12:09
  • 1
    A ver, igual no te entendí bien. Si tu lo que quieres es restringir el máximo de caracteres, usas maxlength el la etiqueta (w3schools.com/tags/att_textarea_maxlength.asp), pero si tu lo que quieres es que no se realicen saltos de linea usa input type text
    – RafaelM
    Commented el 18 mar. 2021 a las 12:15

1 respuesta 1

2
<textarea maxlength="10"></textarea>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.