MaskedEditExtenderによる入力で”#”を入力した際の挙動について

Question

お世話になっております。
現在、以下の環境にてASP.NETWebフォームアプリケーションを作成しています。

ﾌﾞﾗｳｻﾞ: Internet Explorer 11.0.95
VS.NET: 2012
Tool: Ajax Control Toolkit 18.1.0.0

本プログラムで商品情報を入力する際に半角文字でマスキングしているのですが
"#"を入力すると"#"が表示されず、TextBoxの残り入力幅が反転してしまいます。

商品情報に"#123"の様に入力する事があるのですが、この現象で入力する事が
出来ません。
尚、次の2つの方法では入力できるのですが、仕様を満たしていません。

　①他で入力した文字列をカット＆ペースト
　②全角入力後に半角変換する

半角の"#"を入力出来る様にするにはどうしたら宜しいでしょうか。

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" EnableEventValidation="false" 
    AutoEventWireup="true" CodeBehind="PI201F0.aspx.cs" Inherits="PI200.PI201F0" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
<div>

----中略------

<asp:TableCell HorizontalAlign="Left" BorderStyle="Solid" 
    BorderWidth="1px" width="130px" >
    <asp:TextBox ID="txtSC_CODE" runat="server" 
        TabIndex="5" 
        Width="120px" 
        Font-Size="Medium" 
        Height="16px" 
        OnTextChanged="txtSC_CODE_TextChanged" 
        AutoPostBack="true" />
    <ajaxToolkit:MaskedEditExtender 
        ID="maskSC_CODE" 
        runat="server" 
        TargetControlID="txtSC_CODE" 
        Mask="AAAAAAAAAA" 
        MaskType="None" 
        MessageValidatorTip="true" 
        OnFocusCssClass="editmask" 
        Filtered="#-*^/\[]()&;:!?0123456789ｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜｦﾝﾞﾟｧｨｩｪｫｬｭｮｰ" 
        OnInvalidCssClass="invalidmask" 
        InputDirection="LeftToRight" 
        ClearMaskOnLostFocus="false" 
        AutoComplete="false"/>
    <ajaxToolkit:MaskedEditValidator 
        ID="maskEV_SC_CODE" 
        runat="server" 
        ControlToValidate="txtSC_CODE" 
        ControlExtender="maskSC_CODE" 
        Display="Dynamic" 
        IsValidEmpty="false" 
        ValidationExpression="(\S{10})$" />
</asp:TableCell>

Answer 1

検証等はしてないので単なる想像ですが、MaskedEditValidator が影響しているということはありませんか？

ValidationExpression="(\S{10})$" は「空白文字以外の任意の文字 10 文字で終わる」と指定しているようです。それでいいのでしょうか？

MaskedEditValidator コメントアウトして試すなど、問題を再現するのに必要最低限のコードになるまで削っていって、どこが問題か切り分けして、その結果を書いていただけませんか。

Answer 2

SurferOnWwwさん、返信ありがとうございます。

使用しているコントロール単位でコメントアウトした結果が次の通りです。

この結果からMaskedEditExtenderよって、発生していると思われます。

TextBox+MaskedEditValidatorの組み合わせは、ERRORとなるので除外しました。

実際の表示例も記載しておきます。

Answer 3

Ajax Control Toolkit v7 と v17 を使って、以下の最低限に削ったコードで試してみましたが、質問者さんと同じ問題が再現されました。

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<ajaxToolkit:MaskedEditExtender ID="MaskedEditExtender1" runat="server"
    TargetControlID="TextBox1"
    Mask="C{10}"
    Filtered="#-*^/\[]()&;:!?0123456789"
    MaskType="None" />

（注）質問者さんの設定 Mask="AAAAAAAAAA" では Filtered で設定したカスタム文字以外も入力できてしまいます。詳しくは以下の記事を見てください。

MaskedEditコントロールでテキストボックスに入力可能な値を制限するには？
http://www.atmarkit.co.jp/fdotnet/dotnettips/775aspajaxmaskededit1/aspajaxmaskededit1.html

なので、Mask="C{10}" に変える必要があると思います。ただ、Mask が A でも C でも、文字 '#' の入力はダメという結果は同じですが。

原因は調べてみましたが分かりません。

もし文字 '#' が必ず最初の文字になるのであれば、対症療法的ですが、Mask="#C{9}" とすることで対応可能です。

文字 '#' の位置が不定ということですと、MaskedEditExtender では自分は解決策は提案できません。

代案として FilteredTextBoxExtender を使うということではいかがですか？　以下のような感じです。

<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server" 
    TargetControlID="TextBox2"
    FilterType="Custom"
    ValidChars="#-*^/\[]()&;:!?0123456789" />

詳しくは、上に紹介した記事の中で FilteredTextBoxExtender の記事にリンクが張ってありますので、そちらを見てください。

Answer 4

SurferOnWwwさん、貴重な情報ありがとうございます。

FilteredTextBoxExtenderを使って見ます。

結果は、後程挙げさせて頂きます。

Answer 5

ちょっと試してみましたが FilteredTextBoxExtender でほぼ同等の機能を実装できると思います。

最低限のコードだけの例ですが、下のような感じです。

<asp:TextBox ID="TextBox2" runat="server" MaxLength="10" ></asp:TextBox>
<ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server" 
    TargetControlID="TextBox2"
    FilterType="Custom"
    ValidChars="#-*^/\[]()&;:!?0123456789" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
    ErrorMessage="必須入力" ControlToValidate="TextBox2">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" 
    ErrorMessage="文字は #-*^/\[]()&;:!?0123456789 限定で 10 文字以内" 
    ControlToValidate="TextBox2" 
    ValidationExpression="^[-#*^/\\\[\]()&;:!0-9]{1,10}$">
</asp:RegularExpressionValidator>

MaskedEditExtender の Mask による文字数制限は TextBox の MaxLength プロパティで、MaskedEditValidator によるユーザー入力の検証は普通に RequiredFieldValidator, RegularExpressionValidator を使って可能です。

ブラウザの JavaScript を無効にされると FilteredTextBoxExtender による入力制限はかからなくなります。なので、RegularExpressionValidator による検証は必須ですのでご注意ください。

Answer 6

SurferOnWwwさん、結果報告が遅れて申し訳ありませんでした。

無事、FilteredTextBoxExtenderで対処出来ました。

ありがとうございました。