0

gracias de antemano por la ayuda. Nesecito una funcion JavaScript que permita limitar el numero de caracteres permitidos en un input, segun su ancho. Esto por que con el atributo maxlength no me es suficiente, explico por que. Por ejemplo, tengo un input con un Width de 150px, yo quiero que cuando la cadena de texto haya abarcado el tamaño del input ya no se ha permitido escribir otro caracteres.

<input type="text" style="width:150px;" maxlength="10">

En siguiente codigo puede probar que si escribe "hola hola hola" limitara a 10 caracteres y la cadena de texto abarcara menos de la mitad del input. En cambio. si escribe 10 veces w la cadena abarcara mas de la mitad del input. La solucion a este problema seria alguna funcion JS que permita limitar el numero de caracteres dentro del input cuando la cadena de texto abarque el 100% del tamaño del input. Gracias.

1 respuesta 1

0

Utilizá el método Canvas.MeasureText de HTML5.

https://www.w3schools.com/tags/canvas_measuretext.asp

Con esto medís el ancho de un texto en pantalla. Agregás oninput="revisar()" y revisas que no exceda el maximo del width.

El ejemplo lo medi a ojo, tendrías que colocar la medida justa de 150px.

var c = document.getElementById("myCanvas");
    var d = document.getElementById("myInput");
    var ctx = c.getContext("2d");
    ctx.font = "30px Arial";


    function revisar(){
        var txt = d.value;

        if(ctx.measureText(txt).width>363.5) 
            d.value = txt.substring(0, txt.length - 1);

    }
<!DOCTYPE html>
<html>
  <body>

  <input id="myInput" width="300" height="150" oninput="revisar()">
  <canvas id="myCanvas" width="0" height="0" style="display:none;"></canvas>

  </body>
</html>

Saludos.

2
  • Hola, gracias por responder. Este metodo es para un canvas, podrias mostrarme una funcion utilizandolo con un input, por favor.
    – Usiel
    el 8 abr. 2021 a las 19:35
  • Ya te añadi un ejemplo. No se me ocurre otra forma sin usar canvas. Pero no es complicado, lo ocultas.
    – Glauti63
    el 8 abr. 2021 a las 23:22

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.