web-dev-qa-db-ja.com

javascriptを使用してユーザータイプとして大文字に変換する

ユーザーが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;
    }
});
javascriptjqueryuppercasekeycode
37
Butcher
$("#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());
});
23
Shaz
css

#textbox{text-transform:uppercase}
56
kennebec

これはいい回避策かもしれません。 CSSでこれを設定するだけです：

input#textbox {
    text-transform: uppercase;
}

サーバー側のスクリプトにデータを投稿する場合（phpと言う）、いつでも次のようなことができます：

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

こんにちは、このコードは遅延や大文字の変更なしで入力とテキストエリアで正常に動作します

$("#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/127254 と https://stackoverflow.com/a/13155583/127254 の組み合わせ

jsFiddle

5
Yann86

このcssスクリプトを試してみてください。

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

情報については、おそらく大文字ですが、実際には「Test」と入力すると「TEST」と表示されますが、val（）で取得すると「Test」と表示されます。

実際に大文字にしたい場合は、必要に応じて、オブジェクトからのぼかしやエレレントなどのイベントにいくつかのスクリプトを追加します。

$（this）.val（$（this）.val（）。toUpperCase（））;

特定のオブジェクトに使用する場合は、今まで使用していたようなスクリプトを追加します

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

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

これもjQueryの質問としてタグ付けしたので、単純な（まあ、かなり単純な）jQueryソリューションがあります。

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

キープレスを使用すると、キーアップが持つ「バウンス」効果が防止されます（キーダウンも同様ですが、event.whichは大文字と小文字を直接区別しません。CapsLockによりシフトキーチェックが乱雑です）。また、これは入力文字で動作し、大文字に変換してから、既存の値に追加します。最初に追加してから大文字に変換するのは、他のほとんどのソリューションのようにです。最後に、CSSのようにフォーマットスタイルを適用するのではなく、実際に文字を変換します。これはすべて、特にシリアル番号などで一部の文字を大文字にする必要がある場合とそうでない場合に、より優れた制御を提供します。

編集：（4年後）！

入力時にjQuery/javascriptがキーを大文字に変更する処理に満足できませんでした。この投稿のすべての提案を読み終えましたが、どれも（少なくとも私のものでは）完全に機能しません。 KeyPressイベントに渡されたKeyAsciiキャラクターを変更することは昔のVB6時代に簡単な問題であったため、これは私をいらいらさせます。とにかく、かなり偶然に、私がテストした限りでは完璧に機能する一種の「ブラックアート」ソリューションを見つけました。つまり、Chromeで動作し、テキスト上のカーソル位置を正しく処理し、（いくつかの作業で）ブラウザのフォーカス動作を変更せず、小文字を最初に表示することなく、確実に大文字に変更します。 CSSソリューションもこれをすべて行いますが、他の人が観察しているように、実際の文字列を操作する必要があるときに、基になる文字をプログラムで強制的に大文字にする必要があるという欠点があります。うまくスケーリングしません。だから、誰かがそれを便利だと思ったら、これを書くかもしれないと思った。

このソリューションは、Josh Bushの小さな（依存関係の肥大化を心配している人のためのコード180行） digitalbushからのマスク入力プラグイン に依存しています。 _event.which_を別の値に変更し、その後mask()メソッドを呼び出した場合（コードで最初にキー押下ハンドラーを指定し、コードで2番目にマスクを指定します）、変更は保持されます。

コードは次のとおりです。

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

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

マスクは、ネイティブで非常に多くのマスクタイプをサポートしていません。リテラル、アルファ、数値、および英数字です。句読点など、正規表現を使用して独自にロールバックする必要がある場合。 （これを行う場合、同じ正規表現一致が他の文字を考慮せずに各文字に1つずつ適用されることに注意する必要があります。私の特定のケースでは、すべてのキャップに加えて、スペースとコンマが必要でした。マスク文字列の_?_は、次の文字がオプションであることを意味します。したがって、この文字は最大20文字を与えます。表示するマスクは必要なかったため、プレースホルダーには空の文字列を使用しました。

1つの小さな問題を除いて、すべてが完全に機能します。フィールドにタブで移動するときにブラウザーがテキストを選択する方法を維持する場合は、余分な作業を行う必要があります。マスクコードをハッキングして、必要なものを取得する必要がありました。

最初に、フォーカスイベントハンドラーでテキストを選択するだけでした。これは通常、キーダウンハンドラーからfocus()を呼び出したときに機能します。ここでは機能しませんでした。カーソルは、マウスでクリックした場合と同様に、テキストの最後に設定されました。プレースホルダーをスペースに変更してみました。これにより、指定された制限を埋めるのに十分なスペースでテキストが埋め込まれ、全体が選択されました。

私はいくつかのテクニックを試しました ここ ですが、それらのベスト（つまり、この場合に実際に機能したもの）は、キーアップまでハイライトを適用しません。繰り返しますが、キーを押したままにして、フォーカスがボックス内にあるときに放すと、まったく起こりません。

そこで、マスクコードを掘り下げました。結局のところ、プラグインにはフォーカスイベントハンドラーがあり、これを使用してボックスにマスクインジケーター（たとえば、電話の場合は_(___) ___-___-_____）を設定します。これはほとんどの場合に必要な動作ですが、選択されたテキストを、まだ塗りつぶされていないマスクインジケーターの部分に連結された選択されたテキストに置き換えるため、ここではありません。マスクインジケーターがない場合、ボックスのテキスト値をプログラムで割り当てた場合と同様に、ボックス内のテキストの選択を解除する効果があります。

マスクコードを少しハックすることにしました。最初にフォーカスイベントハンドラー全体をコメントアウトしてみました。これにより、他のフィールドに入力マスクが表示されないという効果がありました。だから、私はより侵襲性の低い選択肢を見つけました。これを変更しました（現在はjquery.maskedinput.js、行164）：

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

これに：

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

これにより、プレースホルダーを空白の文字列に設定した場合にマスクインジケーターの設定がバイパスされ、ブラウザーのネイティブフォーカス動作が実行されます。

もう1つ：focus()メソッドを使用してテキストボックスに焦点を合わせている場合（たとえば、タブキーの使用時に不明な部分に移動するブラウザーの傾向からデータ入力ユーザーを救うため）、フォーカスイベントハンドラーでselect()メソッドを呼び出して、テキストを適切に強調表示する必要があります（keybdFocusは、focus()イベントを呼び出すときに設定するフラグですマウスで生成されたフォーカスと区別するためのkeydownハンドラー）：

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

手順の要約：

  1. Josh BushのMasked Editプラグインをダウンロードしてください。
  2. プラグインのフォーカスハンドラーのコード行を変更します。
  3. 必要な文字を処理するためのマスク定義をセットアップします（必要な場合）。
  4. Keypressイベントハンドラーで、お好みの手法を使用して、e.whichを大文字に変換します。 （重要：ハンドラーへの呼び出しは、コード内のmask()メソッドへの呼び出しに先行する必要があります。マスクはe.whichを評価します。候補文字がマスクに適合するかどうかを判断し、明らかにハンドラーとマスクコードは指定された順序で起動されます）
  5. mask()メソッドを呼び出すときに、プレースホルダーの値を_''_に設定します。
  6. 入力ボックスにフォーカスを当てた場合は、フォーカスイベントハンドラーでselect()メソッドを呼び出します。

もちろん、通常のマスクされた編集ボックスのコンテキストで文字を強制的に大文字にしたい場合は、手順2と4を省略できます。

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

私はパーティーにかなり遅れていることを知っていますが、これを提供したいと思います：

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

次の利点があります。

  • プレースホルダーの大文字化をそのまま保持します
  • 入力をすぐに大文字化します（キーダウン時）
  • カーソルを動かさない
  • 事前に入力されている場合、入力の値を大文字にします

JS Fiddle here

1
Chris HG
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}
1
Vishrant

これは私が思いついた解決策であり、プレースホルダーが大文字に変わる問題を回避し、カーソル位置を混乱させません。

注意：フィールドの「値」は変更せず、表示のみを変更します。これについては、以下を参照してください。 カーソル位置を失わずに入力値を更新する

$(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/

0
garryp