C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

ASP.NETのTextBoxで半角数字のみハイフンなし

[トピック内 17 記事 (1 - 17 表示)]  << 0 >>

■82466 / inTopicNo.1)  ASP.NETのTextBoxで半角数字のみハイフンなし
  
□投稿者/ あさ (20回)-(2017/01/11(Wed) 12:28:24)

分類:[.NET 全般] 

お世話になります。

Windows10、VS2015のASP.NET(VB).NET Framework4.6、ローカルIISで開発しています。

TextBoxで半角数字のみ入力可能(ハイフンもなし)で桁数も制限したいと考えています。

TextBoxのTextModeをPhoneにした場合、半角数字+ハイフン以外に英字も入力可能になってしまいますが、
TextBoxのMaxLengthは適用されます。

TextBoxのTextModeをNumberにした場合、半角数字+ハイフンのみの入力になりますが、
TextBoxのMaxLengthが適用されません。

また、ハイフンを入力できないようにするために、

Protected Sub TextBox_TextChanged(sender As Object, e As EventArgs) Handles TextBox.TextChanged
TextBox.Text = Trim(TextBox.Text.Replace("-", ""))
End Sub

を記述しましたが、TextBoxのAutoPostBackをTrueにしませんと適用されませんし、
Trueにしても、入力時には適用されず、
Tabキーや他のボタン等の使用時に適用されます。
AutoPostBackはWEBサーバーへの負荷軽減のため使用しないようにしたいと思います。

そこで、
TextBox_TextChangedのコードは止め、
HTMLの<head>タグの中に、
以下のように<script>タグを追加し、
TextBoxの<>にもonkeyDownを追加しました。
IMEMODEも指定します。
TextModeはPhoneです。
(参照)
http://javascript.eweb-design.com/1205_no.html


<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script>
<!--
// 数値のみを入力可能にする
function numOnly() {
m = String.fromCharCode(event.keyCode);
if("0123456789\b\r".indexOf(m, 0) < 0) return false;
return true;
}
//-->
</script>
</head>
・・・
<asp:TextBox ID="TextBox" runat="server" TextMode="Phone" AutoPostBack="False" ime-mode="disabled" onkeyDown="return numOnly()"></asp:TextBox>


これにより、入力時点で、ハイフン(-)も打てなくなりました。
半角数字のみの入力で、桁数制限も適用されます。

ただ、Shiftキー+数字ボタンで、
「!"#$%&'()」
の記号も入ってしまいます。

これらを打てなくする場合、どのような修正を施せばよいか、分かりません。

どなたかお分かりになられる方がいらっしゃいましたら、
ご教示頂けたら幸いです。

どうぞよろしくお願い申し上げます。


引用返信 編集キー/
■82469 / inTopicNo.2)  Re[1]: ASP.NETのTextBoxで半角数字のみハイフンなし
□投稿者/ WebSurfer (1120回)-(2017/01/11(Wed) 13:01:28)
No82466 (あさ さん) に返信

TextBox, AutoPostBack という言葉が出てくるということは、ASP.NET Web Forms アプリの話と
いうことで良いのですよね? (最初の行に何を作っているかも書いていただけると助かります)

> TextBoxで半角数字のみ入力可能(ハイフンもなし)で桁数も制限したいと考えています。

ASP.NET Web Forms アプリで TextBox に入力されたユーザー入力の検証には、ASP.NET が標準で
提供している検証コントロールを使ってください。

今回のケースでは RequiredFieldValidator と RegularExpressionValidator の 2 つを使い、
前者で未入力のチェック、後者で「半角数字のみ入力可能(ハイフンもなし)で桁数も制限」
を正規表現を使って行うのがよいと思います。

RequiredFieldValidator クラス
https://msdn.microsoft.com/ja-jp/library/system.web.ui.webcontrols.requiredfieldvalidator(v=vs.110).aspx

RegularExpressionValidator クラス
https://msdn.microsoft.com/ja-jp/library/system.web.ui.webcontrols.regularexpressionvalidator(v=vs.110).aspx

上記のコントロールは、クライアント側でも検証ができるように自動的にクライアントスクリプト
もダウンロードされるようになっていて、クライアント側で検証結果 NG の場合はポストバックせ
ずにエラーメッセージを表示しユーザーに修正を促すということも可能になります。

その様子は以下の記事からリンクを張った「実験室」で試して見ることができますのでやってみて
ください。

クライアント側での検証結果の表示
http://surferonwww.info/BlogEngine/post/2013/08/01/showing-the-results-of-validations-at-client-side.aspx


#自力でコードを書いて検証しようなんて努々思わないほうがいいと思います。用意されている
 検証コントロールの定型の検証では要件は満たせない場合でも CustomValidator をつかえば
 可能になるはずです。その例は上に紹介した記事にもありますので見てください。
引用返信 編集キー/
■82478 / inTopicNo.3)  Re[2]: ASP.NETのTextBoxで半角数字のみハイフンなし
□投稿者/ あさ (21回)-(2017/01/11(Wed) 13:58:02)
2017/01/11(Wed) 18:36:56 編集(投稿者)

No82469 (WebSurfer さん) に返信

ありがとうございます。
度々お世話になります。

ASP.NET Web Forms アプリの件です。
以降、気を付けます。

検証コントロールは、ありがとうございます、
CustomValidator以外のものは、使わせていただいておりまして、
入力後の検証は行われるようにしています。

入力時の自力での制限は、しない方がよいというご指摘ですね。

CustomValidatorも使用検討してみます。
引用返信 編集キー/
■82481 / inTopicNo.4)  Re[1]: ASP.NETのTextBoxで半角数字のみハイフンなし
□投稿者/ テキスト (1回)-(2017/01/11(Wed) 14:15:15)
テキスト さんの Web サイト

> TextBoxで半角数字のみ入力可能(ハイフンもなし)で桁数も制限したいと考えています。
ここでは、テキストボックス(TextBoxコントロール)に数字以外の文字が入力できない ようにする方法を幾つか紹介します。


コピー時計:http://www.hoshiwatch.com/

引用返信 編集キー/
■82482 / inTopicNo.5)  Re[3]: ASP.NETのTextBoxで半角数字のみハイフンなし
□投稿者/ WebSurfer (1121回)-(2017/01/11(Wed) 14:47:13)
No82478 (あさ さん) に返信

全文の引用は止めてください。見難くなるだけですので。以下のように必要な部分のみにとどめて
ください。

> CustomValidator以外のものは、使わせていただいておりまして、
> 入力後の検証は行われるようにしています。

意味が分かりません。質問者さんのやりたいこと、

> TextBoxで半角数字のみ入力可能(ハイフンもなし)で桁数も制限したいと考えています。

は RegularExpressionValidator を使って問題もいなくできると思っているですが、使っていて
も目的が果たせないと言っていますか? そうだとすると何が問題なのですか?

> 入力時の自力での制限は、しない方がよいというご指摘ですね。

何か誤解していませんか? せっかく ASP.NET に備わった検証コントロールが利用できるのだから
それを使えばごく簡単に ASP.NET 標準の検証ができ、開発工数も保守工数もミニマムになるのだか
ら、自力でコードを書いて検証機能を持たせるなんてことは考えなくてもすみますよ・・・というこ
とを言っています。
引用返信 編集キー/
■82487 / inTopicNo.6)  Re[3]: ASP.NETのTextBoxで半角数字のみハイフンなし
□投稿者/ WebSurfer (1122回)-(2017/01/11(Wed) 17:06:36)
No82478 (あさ さん) に返信

ひょっとして、ユーザーがキーボードを押すたびリアルタイムでチェックして
半角数字以外は入力できないようにしたいと言っていますか?

(そうすると、それは ASP.NET Web Forms アプリの話というよりは JavaScript
の話になると思うのですが。分類:[.NET 全般] の話でもないですね)

そういうのは、ユーザーが必ずしもキーボードを使って一文字ずつ入力するとは
限らないので(例えばコピペされるとダメ)、個人的にはあまり意味が無いと
思っているのですが。
引用返信 編集キー/
■82490 / inTopicNo.7)  Re[4]: ASP.NETのTextBoxで半角数字のみハイフンなし
□投稿者/ あさ (22回)-(2017/01/11(Wed) 18:35:54)
No82487 (WebSurfer さん) に返信
> ■No82478 (あさ さん) に返信

全文引用、失礼しました。

> ひょっとして、ユーザーがキーボードを押すたびリアルタイムでチェックして
> 半角数字以外は入力できないようにしたいと言っていますか?

おっしゃるとおりです。

> (そうすると、それは ASP.NET Web Forms アプリの話というよりは JavaScript
> の話になると思うのですが。分類:[.NET 全般] の話でもないですね)

JavaScriptを使う言語は他にもあると思いますので、
こちらで質問させていただきました。

追記ですが、OnKeyDown属性はTextBoxの属性ではないとエラーが出てしまいました。
このため、初めに提示しましたJavaScriptもTextBoxには適用できなさそうです。


> そういうのは、ユーザーが必ずしもキーボードを使って一文字ずつ入力するとは
> 限らないので(例えばコピペされるとダメ)、個人的にはあまり意味が無いと
> 思っているのですが。

ありがとうございます。

コピペの場合は、そうですね。

検証コントロールで対応してみます。
引用返信 編集キー/
■82491 / inTopicNo.8)  Re[2]: ASP.NETのTextBoxで半角数字のみハイフンなし
□投稿者/ あさ (23回)-(2017/01/11(Wed) 18:37:40)
No82481 (テキスト さん) に返信
>

> コピー時計:http://www.hoshiwatch.com/

プログラミングとはまったく関係ないリンクでしょうか?
引用返信 編集キー/
■82492 / inTopicNo.9)  Re[3]: ASP.NETのTextBoxで半角数字のみハイフンなし
□投稿者/ あさ (24回)-(2017/01/11(Wed) 18:38:30)
No82491 (あさ さん) に返信

検証コントロールで対応してみます。
解決済み
引用返信 編集キー/
■82494 / inTopicNo.10)  Re[5]: ASP.NETのTextBoxで半角数字のみハイフンなし
□投稿者/ WebSurfer (1123回)-(2017/01/11(Wed) 19:11:47)
No82490 (あさ さん) に返信

> 追記ですが、OnKeyDown属性はTextBoxの属性ではないとエラーが出てしまいました。
> このため、初めに提示しましたJavaScriptもTextBoxには適用できなさそうです。

そんなことはないと思うのですが。やり方の問題かと。

TextBox は html にレンダリングされると <input type="text" ... /> になって keydown, keypress,
keyup イベントのどれも有効のはずなのですが。

一番最初の質問を見ると、

> ただ、Shiftキー+数字ボタンで、
> 「!"#$%&'()」
> の記号も入ってしまいます。

というところ以外は期待通りになったように読めるのですが、違うのでしょうか? ただ、何にせよ、上
記が問題だとすると keydown を使っては解決できないようですけど。

ユーザーが入力するたび keyup イベントでテキストボックスの全文字列を取得し、それを正規表現を使っ
てチェックし、NG だったら最後の一文字を削除するというような操作をしなければダメかもしれませんね。


> 検証コントロールで対応してみます。

それが一番いいと思います。クライアントスクリプトのよって change イベントで検証がかかりますので、
それで十分だと思います。

引用返信 編集キー/
■82495 / inTopicNo.11)  Re[4]: ASP.NETのTextBoxで半角数字のみハイフンなし
□投稿者/ WebSurfer (1124回)-(2017/01/11(Wed) 19:14:46)
解決済みマークを付け忘れました
解決済み
引用返信 編集キー/
■82526 / inTopicNo.12)  Re[6]: ASP.NETのTextBoxで半角数字のみハイフンなし
□投稿者/ あさ (25回)-(2017/01/14(Sat) 09:58:00)
No82494 (WebSurfer さん) に返信

ありがとうございます。

OnKeyDownをTextBoxの<>の中に書きますと、
実行は出来るのですが、
ビルド時に注意が出てしまいます。
(エラー、という表現が不適切でした)

色々とさらに研究してみます。
解決済み
引用返信 編集キー/
■82527 / inTopicNo.13)  Re[5]: ASP.NETのTextBoxで半角数字のみハイフンなし
□投稿者/ あさ (26回)-(2017/01/14(Sat) 10:24:03)
No82495 (WebSurfer さん) に返信

追記です。
onkeydownについては、
TextBoxの<>の中には書かずに、
PageのLoad時に、
次のように書いて、注意も出なくなりました。
ただ、「!"#$%&'()」が打てるのは変りません。

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
TextBox.Attributes.Add("onkeydown", "return numOnly()")
End Sub

ありがとうございます。
解決済み
引用返信 編集キー/
■82528 / inTopicNo.14)  Re[6]: ASP.NETのTextBoxで半角数字のみハイフンなし
□投稿者/ あさ (27回)-(2017/01/14(Sat) 10:59:22)
No82527 (あさ さん) に返信

さらに追記です。

上記のonkeydownの関数を適用しますと、
テンキーでの数字入力ができないことがわかりました。
調べてみます。
解決済み
引用返信 編集キー/
■82529 / inTopicNo.15)  Re[7]: ASP.NETのTextBoxで半角数字のみハイフンなし
□投稿者/ WebSurfer (1125回)-(2017/01/14(Sat) 11:21:40)
No82528 (あさ さん) に返信

先の私のレスで、

> ユーザーが入力するたび keyup イベントでテキストボックスの全文字列を取得し、それを正規表現を使っ
> てチェックし、NG だったら最後の一文字を削除するというような操作をしなければダメかもしれませんね。

と書きましたが、その案でコーディングしてみましたのでご参考にコードをアップしておきます。

検証 NG で一文字削除するところでチラチラするのが鬱陶しいし、十分検証してないのでどこかに抜け
穴があるかもしれません。あくまでご参考までということで。

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    // 2017/1/11 わんくまの検証用
    // http://bbs.wankuma.com/index.cgi?mode=al2&namber=82466
    
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="/Scripts/jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
        $(function () {
            var textbox = $('#<%=TextBox1.ClientID %>');

            textbox.keyup(function () {
                var str = textbox.val();
                if (!str.match(/^[0-9]{1,10}$/)) {
                    textbox.val(str.substring(0, str.length - 1));
                }
            });
        });
    //]]>
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    </form>
</body>
</html>

引用返信 編集キー/
■82530 / inTopicNo.16)  Re[8]: ASP.NETのTextBoxで半角数字のみハイフンなし
□投稿者/ WebSurfer (1126回)-(2017/01/14(Sat) 11:24:12)
すみません、また回答済みマークを付け忘れました。
解決済み
引用返信 編集キー/
■82562 / inTopicNo.17)  Re[9]: ASP.NETのTextBoxで半角数字のみハイフンなし
□投稿者/ あさ (28回)-(2017/01/15(Sun) 10:20:20)
No82530 (WebSurfer さん) に返信

お忙しい中、まことにありがとうございます^^。
研究させていただきます。
解決済み
引用返信 編集キー/

このトピックをツリーで一括表示


トピック内ページ移動 / << 0 >>

このトピックに書きこむ