web-dev-qa-db-ja.com

ASP.NETテキストボックスで大文字を強制的に入力するにはどうすればよいですか？

ASP.NETアプリケーションを作成しています。 Webフォームにテキストボックスがあり、ユーザーが入力したものをすべて大文字にしたい。これをフロントエンドで実行したいと思います。また、このテキストボックスには検証コントロールがあるため、ソリューションがASP.NET検証に干渉しないことを確認する必要があります。

説明： CSSテキスト変換により、ユーザー入力が大文字で表示されるようです。ただし、内部では、検証コントロールが失敗するため、小文字のままです。検証コントロールは、有効な状態コードが入力されているかどうかを確認しますが、使用している正規表現は大文字のみで動作します。

javascriptasp.nethtmltextboxuppercase
32
Aheho

CSSとバックエンドを組み合わせて使用​​してみませんか？使用する：

style='text-transform:uppercase'

textBox、および分離コードでの使用：

Textbox.Value.ToUpper();

小文字と大文字を使用するようにバリデーターの正規表現を簡単に変更することもできます。おそらく、大文字を強制するよりも簡単な解決策でしょう。

52
Ryan Abbott

テキストボックスでCSSスタイルを使用します。 CSSは次のようになります。

.uppercase
{
    text-transform: uppercase;
}

<asp:TextBox ID="TextBox1" runat="server" Text="" CssClass="uppercase"></asp:TextBox>;
22
billb
**I would do like:
<asp:TextBox ID="txtName" onkeyup="this.value=this.value.toUpperCase()" runat="server"></asp:TextBox>**
7
Vinay Yadav

キーを押すイベントをインターセプトし、小文字のイベントをキャンセルし、大文字のバージョンを入力に追加できます。

window.onload = function () {
    var input = document.getElementById("test");

    input.onkeypress = function () {
        // So that things work both on Firefox and Internet Explorer.
        var evt = arguments[0] || event;
        var char = String.fromCharCode(evt.which || evt.keyCode);

        // Is it a lowercase character?
        if (/[a-z]/.test(char)) {
            // Append its uppercase version
            input.value += char.toUpperCase();

            // Cancel the original event
            evt.cancelBubble = true;
            return false;
        }
    }
};

これは、FirefoxとInternet Explorerの両方で機能します。実際にそれを見ることができます here 。

6
Ates Goral
<!-- Script by hscripts.com -->
<script language=javascript>
    function upper(ustr)
    {
        var str=ustr.value;
        ustr.value=str.toUpperCase();
    }

    function lower(ustr)
    {
        var str=ustr.value;
        ustr.value=str.toLowerCase();
    }
</script>

<form>
    Type Lower-case Letters<textarea name="address" onkeyup="upper(this)"></textarea>
</form>

<form>
    Type Upper-case Letters<textarea name="address" onkeyup="lower(this)"></textarea>
</form>
3
SRIKANTH

人気のある4つのブラウザーバージョンで、この問題に関する分析を行いました。

  1. スタイルタグsimpleは文字を大文字で表示しますが、コントロール値は依然として小文字のままです
  2. 上記の文字コードを使用したキー押下機能は、Firefox chromeおよびsafariのように機能を無効にするため、少し心配です Ctrl + V コントロールに。
  3. 文字レベルを大文字に使用することに関する他の問題も、文字列全体を大文字に変換しないことです。

  4. 私が見つけた答えは、スタイルタグと組み合わせてキーアップでこれを実装することです。

    <-- form name="frmTest" -->
<-- input type="text" size=100 class="ucasetext" name="textBoxUCase" id="textBoxUCase" -->
<-- /form -->

window.onload = function() {
    var input = document.frmTest.textBoxUCase;
    input.onkeyup = function() {
        input.value = input.value.toUpperCase();
    }
};
2
Vasan Ramani

今日は似たようなことをしました。変更されたバージョンは次のとおりです。

<asp:TextBox ID="txtInput" runat="server"></asp:TextBox>
<script type="text/javascript">
    function setFormat() {
        var inp = document.getElementById('ctl00_MainContent_txtInput');
        var x = inp.value;
        inp.value = x.toUpperCase();
    }

    var inp = document.getElementById('ctl00_MainContent_txtInput');
    inp.onblur = function(evt) {
        setFormat();
    };
</script>

基本的に、スクリプトはテキストボックスがフォーカスを失ったときに発生するイベントを添付します。

2
Jason Z
 style='text-transform:uppercase'
2
Diodeus - James MacFarlane

JQueryを使用してこれを行います。

<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#txt").keydown(function(e) {
            if (e.keyCode >= 65 & e.keyCode <= 90) {
                val1 = $("#txt").val();
                $("#txt").val(val1 + String.fromCharCode(e.keyCode));
                return false;
            }
        });
    });
</script>

/scriptフォルダーにjQueryライブラリーが必要です。

2
Cyril Gupta

text-transformCSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase

CssClass

WebControl.CssClassプロパティ

あなたはそれについてもっと学ぶことができます- https://developer.mozilla.org/en/docs/Web/CSS/text-transform

https://msdn.Microsoft.com/en-us/library/system.web.ui.webcontrols.webcontrol.cssclass（v = vs.110）.aspx

useStyle="text-transform: uppercase;"またはCssClass="upper"

2
Codeone

検証する前に、フロントエンドにテキスト変換CSSを使用し、文字列サーバー側でtoUpperメソッドを使用します。

1
anon

ここに私のために働いた解決策があります。

http://plugins.jquery.com/project/bestupper

JavaScriptを http://plugins.jquery.com/files/jquery.bestupper.min.js.txt から取得する必要があります。

チャームのように機能します！

1
Robert Green MBA

単純な1つのインラインステートメントを使用します

<asp:TextBox ID="txtLocatorName" runat="server"
 style="text-transform:uppercase" CssClass="textbox"  
 TabIndex="1">
</asp:TextBox>

Cssクラスを使用したくない場合は、インラインスタイルステートメントを使用できます（これは目に見えるように大文字にするだけです）:)

サーバー側で使用

string UCstring = txtName.Text.ToUpper();
1
Vijay Kumbhoje

テキストボックスのスタイルを text-transform：uppercase ？として設定します

1
Will

ここでCSSが役立ちます。

style="text-transform: uppercase";"

これは役立ちますか？

1
shahkalpesh
  <telerik:RadTextBox ID="txtCityName" runat="server" MaxLength="50" Width="200px"
                            Style="text-transform: uppercase;">
0
Chetan Sanghani

JavaScriptには、文字列の「toUpperCase（）」関数があります。

したがって、これらの線に沿って何か：

function makeUpperCase(this)
{
    this.value = this.value.toUpperCase();
}
0
Stephen Wrighton

私はそれが少し遅れていることに気づきましたが、ASP.NET AJAXで動作する良い答えを見つけることができなかったので、上記のコードを修正しました：

function ToUpper() {
        // So that things work both on FF and IE
        var evt = arguments[0] || event;
        var char = String.fromCharCode(evt.which || evt.keyCode);

        // Is it a lowercase character?
        if (/[a-z]/.test(char)) {
            // convert to uppercase version
            if (evt.which) {
                evt.which = char.toUpperCase().charCodeAt(0);
            }
            else {
                evt.keyCode = char.toUpperCase().charCodeAt(0);
            }
        }

        return true;
    }

次のように使用します：

       <asp:TextBox ID="txtAddManager" onKeyPress="ToUpper()" runat="server" 
             Width="84px" Font-Names="Courier New"></asp:TextBox>
0
NetMage
     $().ready(docReady);

     function docReady() {

            $("#myTextbox").focusout(uCaseMe);
     }

     function uCaseMe() {

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

            // Reset the current value to the Upper Case Value
            $(this).val(val);
        }

これは再利用可能なアプローチです。テキストボックスは、名前を付けずにこの方法でいくつでも作成できます。 docReadyのセレクターを変更することで、ページ全体のソリューションを実現できます。

私の例ではフォーカスが失われているため、入力時に質問が特定されませんでした。シナリオで重要な場合は、変更時にトリガーできます。

0
greg