Question

我想将小写字母转换为大写，因为用户使用javascript键入。欢迎任何建议。

我尝试了以下内容：

$("#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

css

#textbox{text-transform:uppercase}

Answer 2

$("#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 3

这可能是一个很好的解决方法。只需在CSS中设置：

input#textbox {
    text-transform: uppercase;
}

如果您将数据发布到服务器端脚本（比如说php），您可以随时执行以下操作：

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

Answer 4

嗨，此代码在输入和textarea上正常工作，没有延迟或大写更改

$("#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;
            });

来自https://stackoverflow.com/a/7944108/1272540和https://stackoverflow.com/a/13155583/1272540

jsFiddle

Answer 5

尝试这个css脚本，它为我工作。

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

有关信息，你看到的可能是大写但是如果你输入＆＃34;测试＆＃34;它实际上仍然是你输入的内容。它显示为＆＃34; TEST＆＃34;但是当你通过val（）获得时，它显示为＆＃34;测试＆＃34;。

如果你想让它成为真实的大写，那么在下面添加一些脚本来处理像对象或elenent这样的模糊事件。

$（本）.VAL（$（本）.VAL（）toUpperCase（））;

如果您想使用特定对象，请添加一些额外的脚本，就像我现在使用的那样

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

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

Answer 6

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)" />

修改

最简单的方式是使用css：

#txtId {text-transform:uppercase}

Answer 7

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

Answer 8

我知道我参加派对已经很晚了，但是我想提供这个：

(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 ));

它具有以下优点：

保持占位符大写不变
立即大写输入（在keydown上）
不移动光标
如果输入的预先填充

JS小提琴here

Answer 9

这是我提出的解决方案，它也避免了占位符更改为大写的问题，并且不会弄乱光标位置。

警告：不会更改＆＃34;值＆＃34;该字段，只显示。为此，请参阅此处：Updating an input's value without losing cursor position

$(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;
        }
    });
});

然后将一个data-uppercase属性添加到HTML元素：

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

使用Chrome，Firefox和IE9 +。

小提琴：https://jsfiddle.net/GarryPas/ptez7q0q/3/

Answer 10

虽然CSS +服务器端UCase方法可能“最好”，但这是我在需要时使用的客户端jQuery解决方案：

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

她不漂亮，但她会完成工作！

Answer 11

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

上述脚本中的小修正现在可以很好地完成。

使用javascript将用户类型转换为大写

11 个答案: