solo - validar expresiones regulares javascript

Convierte a mayúsculas como tipos de usuario con javascript

Question

Quiero convertir caracteres en minúscula en mayúsculas a medida que el usuario escribe utilizando javascript. Cualquier sugerencia es bienvenida.

He probado lo siguiente:

$("#textbox").live(''keypress'', function (e) {
    if (e.which >= 97 && e.which <= 122) {
        var newKey = e.which - 32;
        // I have tried setting those
        e.keyCode = newKey;
        e.charCode = newKey;
    }
});

Answer 1

Como etiquetaste esto como una pregunta jQuery, aquí hay una solución jQuery simple (bueno, bastante simple):

$(''#text_statute_section'').on(''keypress'', function(event) {
    if(null !== String.fromCharCode(event.which).match(/[a-z]/g)) {
        event.preventDefault();
        $(this).val($(this).val() + String.fromCharCode(event.which).toUpperCase());
    }
});

El uso de la tecla previene el efecto de "rebote" que tiene keyup (la tecla también lo hace, pero event.which no distingue directamente entre mayúsculas y minúsculas aquí - la verificación de la tecla shift está desordenada debido al bloqueo de mayúsculas). Además, esto opera en el carácter de entrada, lo convierte en mayúscula y luego lo agrega al valor existente, en lugar de anexarlo primero y luego convertirlo a mayúsculas como la mayoría de las otras soluciones que he visto. Finalmente, en realidad convierte el carácter en lugar de aplicarle un estilo de formato como lo hace CSS. Todo esto proporciona un mejor control, especialmente en situaciones en las que algunos personajes deben ser forzados a mayúsculas y otros no, como en números de serie o similares.

EDITAR: (cuatro años después)!

Nunca he estado contento con la forma en que jQuery / javascript maneja cambiar las teclas a mayúsculas a medida que se escriben. He revisado todas las sugerencias en esta publicación, y ninguna de ellas (y menos la mía) funcionó perfectamente. Esto es irritante para mí, ya que era un asunto simple en los viejos días de VB6 cambiar el personaje KeyAscii que se pasó al evento KeyPress. De todos modos, por casualidad, he encontrado una especie de solución de "arte negro" que funciona sin problemas en la medida en que lo he probado. Lo que significa que funciona en Chrome, maneja correctamente cualquier posición del cursor en el texto, (con algo de trabajo) no cambia el comportamiento de enfoque del navegador, y cambia de manera confiable a mayúsculas sin ningún tipo de muestra nerviosa de minúsculas primero. Mientras que la solución CSS también hace todo esto, como otros han observado, tiene el inconveniente de tener que forzar programáticamente los caracteres subyacentes a mayúsculas cuando se necesita la cadena real para trabajar, lo cual puede ser una tarea difícil de seguir y, por lo tanto, doesn se escala bien Entonces, pensé que podría escribir esto, en caso de que alguien lo encuentre útil.

Esta solución depende del pequeño paquete de Josh Bush (180 líneas de código, para aquellos preocupados por la hinchazón de la dependencia) Masked Input Plugin de digitalbush , que es sólido como una roca y hace lo que hace muy bien. Si cambia event.which a otro valor, y luego llama al método mask() (especifique primero el manejador de pulsaciones de tecla y el segundo de máscara en su código) el cambio persistirá.

Aquí hay un poco de código:

$.mask.definitions[''b''] = ''[A-Z, ]'';

$(''#txtMyInput'').on(''keypress'', function(e) {
    e.which =     String.fromCharCode(e.which).toUpperCase().charCodeAt(0);
})
.mask(''b?bbbbbbbbbbbbbbbbbbb'', { placeholder: '''' })

La máscara no admite muchos tipos de máscara de forma nativa: literales, alfa, numérica y alfanumérica. Si quieres puntuación o lo que sea que tengas que hacer por ti mismo usando regex. (Si hace esto, tendrá que tener en cuenta que se aplica la misma coincidencia de expresiones regex a cada carácter de uno en uno, sin considerar a los otros personajes, por lo que no puede hacer nada elegante). En mi caso particular, necesitaba todas las mayúsculas, además de espacios y comas. El ? en la cadena de máscara significa que los siguientes caracteres son opcionales, por lo que este me da hasta 20 caracteres. Como no necesitaba ninguna máscara para mostrar, utilicé una cadena vacía como marcador de posición.

Todo funciona a la perfección, excepto por un pequeño problema: si desea mantener la forma en que el navegador selecciona el texto al tabular en el campo, debe hacer un trabajo adicional. Terminé teniendo que hackear el código de máscara para obtener lo que quería.

Primero intenté simplemente seleccionar el texto en un controlador de eventos de enfoque, que normalmente funciona cuando llamo a focus() desde un manejador de teclas. No funcionó aquí; el cursor acaba de establecerse al final del texto como lo haría con un clic del mouse allí. Traté de cambiar el marcador de posición a un espacio. Esto resultó en relleno del texto con suficientes espacios para llenar el límite especificado y seleccionar todo.

Intenté algunas de las técnicas here , pero la mejor de ellas (es decir, la que realmente funcionó en este caso) todavía no aplica el resaltado hasta la tecla, lo que significa que hay un retraso cuando sucede, y no sucederá si mantiene presionada la tecla hasta que se repita y la suelte cuando el foco está en la caja.

Así que busqué en el código de la máscara. Como resultado, el complemento también tiene un controlador de eventos de enfoque que usa para configurar el indicador de máscara (por ejemplo, (___) ___-___-____ para un teléfono) en el cuadro cuando se enfoca en él. Este es el comportamiento que desea la mayoría de las veces, pero no aquí, porque reemplaza el texto seleccionado con el texto seleccionado concatenado con la parte del indicador de máscara que aún no se ha llenado. Cuando no tiene un indicador de máscara, esto tiene el efecto de anular la selección del texto en el recuadro, tal como sucedería si asignara programáticamente el valor de texto del recuadro.

Decidí piratear el código de la máscara un poco. Primero traté de comentar todo el manejador de eventos de foco, que tuvo el efecto de no mostrar la máscara de entrada en otros campos donde yo lo quería. Entonces, encontré una alternativa menos invasiva. Cambié esto (actualmente jquery.maskedinput.js, línea 164):

}).on("focus.mask", function() {
    if (!input.prop("readonly") { 
        // etc.

a esto:

}).on("focus.mask", function() {
    if (!input.prop("readonly") && settings.placeholder.length > 0) {

Esto pasa por alto la configuración del indicador de máscara si ha establecido su marcador de posición en una cadena en blanco, lo que permite que tenga lugar el comportamiento de enfoque nativo del navegador.

Una cosa más: si está utilizando el método focus() para enfocarse en el cuadro de texto (por ejemplo, para rescatar al usuario de entrada de datos de la tendencia del navegador a deambular por partes desconocidas al usar la tecla de tabulación), tendrá llamar al método select() en el controlador de eventos de enfoque para resaltar el texto ( keybdFocus es un indicador que configuro cuando llamo al evento focus() desde un manejador de keydown , para distinguirlo de un foco generado por el mouse):

$(''#txtMyInput'').on(''keypress'', function(e) {
    e.which = String.fromCharCode(e.which).toUpperCase().charCodeAt(0);
})
.mask(''b?bbbbbbbbbbbbbbbbbbb'', { placeholder: '''' })
.focus(function() {
    if (kybdFocus) {
        kybdFocus = false;
        $(this).select();
    }
});

Resumiendo los pasos:

1. Descargue el complemento de edición enmascarada de Josh Bush.
2. Cambie la línea de código en el controlador de enfoque del complemento.
3. Configure una definición de máscara (si es necesario) para manejar los caracteres que desee.
4. En su controlador de eventos de pulsación de tecla, use su técnica favorita para cambiar e.which a su equivalente en mayúscula. (Importante: la llamada al controlador debe preceder a la llamada al método mask() en su código. La máscara evalúa e.which para determinar si el personaje candidato se ajusta a la máscara, y aparentemente el controlador y el código de la máscara se disparan en el orden en que se especifican)
5. Establezca el valor del marcador de posición en '''' cuando llame al método mask() .
6. Si presiona el cuadro de entrada con un foco, llame al método select() en su controlador de eventos de enfoque.

Por supuesto, si solo quiere forzar a los caracteres a mayúsculas en el contexto de un cuadro de edición enmascarado típico, puede omitir los pasos 2 y 4. Así es como me enamoré de esto en primer lugar.

Answer 2

Esta es una solución que se me ocurrió, que también evita los problemas con los marcadores de posición que cambian a mayúsculas, y no se mete con la posición del cursor.

Precaución: no cambia el "valor" del campo, solo la pantalla. Para eso vea aquí: Actualizar el valor de una entrada sin perder la posición del cursor

$(function() {
    $("[data-uppercase=''1'']").on(''keypress'', function (e) {
        var $this = $(this);
        var placeholder = $this.attr(''placeholder'');
        if(placeholder && placeholder.length > 0) {
            this["_placeholder"] = placeholder;
            $this.attr(''placeholder'', '''');
        }
        $this.css(''text-transform'', ''uppercase'');
    }).on(''keyup blur'', function () {
        var $this = $(this);
        if ($this.val().length < 1) {
            $this.css("text-transform", "");
            $this.attr("placeholder", this["_placeholder"]);
            this["_placeholder"] = undefined;
        }
    });
});

A continuación, agregue un atributo de mayúsculas de datos al elemento HTML:

<input type="text" data-uppercase="1" />

Trabajó en Chrome, Firefox e IE9 +.

Fiddle: https://jsfiddle.net/GarryPas/ptez7q0q/3/

Answer 3

Esta podría ser una buena solución. Solo configura esto en tu CSS:

input#textbox {
    text-transform: uppercase;
}

Si publica los datos en un script del lado del servidor (digamos php) siempre puede hacer algo como esto:

$upper_data = strtoupper($_POST[''textbox'']);

Answer 4

Hola, este código funciona bien en input y textarea sin demora o cambio de mayúsculas

$("#input").on(''input'', function(evt) {
              var input = $(this);
              var start = input[0].selectionStart;
              $(this).val(function (_, val) {
                return val.toUpperCase();
              });
              input[0].selectionStart = input[0].selectionEnd = start;
            });

mezclar desde https://.com/a/7944108/1272540 y https://.com/a/13155583/1272540

jsFiddle

Answer 5

Sé que llego bastante tarde a la fiesta, pero me gustaría ofrecer esto:

(function ( $ ) {

  var displayUppercase = function ($element) {
    if ($element.val()) {
      $element.css(''text-transform'', ''uppercase'');
    } else {
      $element.css(''text-transform'', ''none'');
    }
  };

  $.fn.displayAsUppercase = function() {
    $(this).each(function() {
        var $element = $(this);
      displayUppercase($element);
      $element.on(''input'', function(){displayUppercase($element)});
    });
    return this;
    };

}( jQuery ));

Tiene estas ventajas:

• Mantiene la capitalización del marcador de posición intacta
• Capitaliza la entrada de inmediato (en la tecla de reducción)
• No mueve el cursor
• Capitaliza el valor de la entrada si está prepoblada

JS Fiddle here

Answer 6

Si bien el enfoque CSS + Server Side UCase es probablemente el "mejor", aquí hay una solución jQuery del lado del cliente que uso cuando surge la necesidad:

$("#id").keyup(function() {
    $(this).val($(this).val().replace(/([a-z])/,function(s){return s.toUpperCase()}));
});

Ella no es bonita, ¡pero hará el trabajo!

Answer 7

prueba este script CSS, es mi trabajo.

<style>    
input{text-transform:uppercase};
</style>    

para obtener información, lo que ve quizás sea mayúscula, pero en realidad sigue siendo lo que escribe si escribe "Prueba" que se muestra como "PRUEBA", pero cuando obtiene val () se muestra como "Prueba".

si desea que sea en mayúscula real, a continuación, agregue algunos guiones a continuación en caso de desenfoque del objeto o Elenent como sea necesario.

$ (this) .val ($ (this) .val (). toUpperCase ());

Y si desea usar un objeto específico, agregue un guión adicional como el que he usado hasta ahora

input[attr]{
text-transform:uppercase;
}

input[attr=''value'']{
text-transform:uppercase;
}

Answer 8

$("#id").keyup(function() {
    $(this).val($(this).val().replace(/([a-z])/,function(){
        return $("#id").toUpperCase();
    }));
});

pequeña corrección en el script anterior esto funcionará perfectamente ahora.

Answer 9

$("#textbox").bind(''keyup'', function (e) {
    if (e.which >= 97 && e.which <= 122) {
        var newKey = e.which - 32;
        // I have tried setting those
        e.keyCode = newKey;
        e.charCode = newKey;
    }

    $("#textbox").val(($("#textbox").val()).toUpperCase());
});

Answer 10

$(document).ready(function () {
        $("#textbox").keyup( function (e) {
            var str = $(this).val();
            $("#textbox").val(str.toUpperCase());
});
});

Answer 11

css

#textbox{text-transform:uppercase}

Answer 12

function changeToUpperCase(event,obj) {
    charValue = (document.all) ? event.keyCode : event.which;
    if (charValue!="8" && charValue!="0" && charValue != "27"){
        obj.value += String.fromCharCode(charValue).toUpperCase();
        return false;
    }else{
        return true;
    }
}

<input id="txtId" type="text" onkeypress="return changeToUpperCase(event,this)" />

Editar:

La forma más simple es usar css:

#txtId {text-transform:uppercase}