web-dev-qa-db-ja.com

複数行テキストボックスのmaxlengthを指定する

私はaspを使用しようとしています：

<asp:TextBox ID="txtInput" runat="server" TextMode="MultiLine"></asp:TextBox>

maxlengthプロパティを指定する方法が必要ですが、明らかにmultiline textbox。私はonkeypressイベントにJavaScriptを使用しようとしています。

onkeypress="return textboxMultilineMaxNumber(this,maxlength)"

function textboxMultilineMaxNumber(txt, maxLen) {
    try {
        if (txt.value.length > (maxLen - 1)) return false;
    } catch (e) { }
    return true;
}

このJavaScript関数の問題はうまく機能しますが、文字を書き込んだ後は文字を削除したり置換したりすることができないため、その動作は望ましくありません。

それを回避するために上記のコードで何を変更できるか、またはそれを回避する他の方法は何ですか？

asp.nettextboxmultilinemaxlength
74
Blerta

このjavascriptを試してください：

function checkTextAreaMaxLength(textBox,e, length)
{

        var mLen = textBox["MaxLength"];
        if(null==mLen)
            mLen=length;

        var maxLength = parseInt(mLen);
        if(!checkSpecialKeys(e))
        {
         if(textBox.value.length > maxLength-1)
         {
            if(window.event)//IE
              e.returnValue = false;
            else//Firefox
                e.preventDefault();
         }
    }   
}
function checkSpecialKeys(e)
{
    if(e.keyCode !=8 && e.keyCode!=46 && e.keyCode!=37 && e.keyCode!=38 && e.keyCode!=39 && e.keyCode!=40)
        return false;
    else
        return true;
}

コントロールで次のように呼び出します。

<asp:TextBox Rows="5" Columns="80" ID="txtCommentsForSearch" MaxLength='1999' onkeyDown="checkTextAreaMaxLength(this,event,'1999');"  TextMode="multiLine" runat="server"> </asp:TextBox>

また、checkSpecialKeys関数を使用して、javascript実装の入力を検証することもできます。

40
Raúl Roa

代わりに正規表現バリデーターを使用してください。これは、JavaScriptを使用するクライアント側で機能しますが、JavaScriptが無効になっている場合にも機能します（サーバーで長さチェックも実行されるため）。

次の例では、入力した値の長さが0〜100文字であることを確認します。

<asp:RegularExpressionValidator runat="server" ID="valInput"
    ControlToValidate="txtInput"
    ValidationExpression="^[\s\S]{0,100}$"
    ErrorMessage="Please enter a maximum of 100 characters"
    Display="Dynamic">*</asp:RegularExpressionValidator>

もちろん、目的に合わせてより複雑な正規表現を使用できます。

73
Alex Angas

複雑にしないでおく。最新のブラウザのほとんどは、テキスト領域（IEを含む）でmaxlength属性をサポートしているため、その属性を分離コードに追加するだけです。 JS、Jquery、継承、カスタムコード、大騒ぎ、ムスはありません。

VB.Net：

fld_description.attributes("maxlength") = 255

C＃

fld_description.attributes["maxlength"] = 255
24
Mike A.

独自のロール：

function Count(text) 
{
    //asp.net textarea maxlength doesnt work; do it by hand
    var maxlength = 2000; //set your value here (or add a parm and pass it in)
    var object = document.getElementById(text.id)  //get your object
    if (object.value.length > maxlength) 
    {
        object.focus(); //set focus to prevent jumping
        object.value = text.value.substring(0, maxlength); //truncate the value
        object.scrollTop = object.scrollHeight; //scroll to the end to prevent jumping
        return false;
    }
    return true;
}

このような呼び出し：

<asp:TextBox ID="foo" runat="server" Rows="3" TextMode="MultiLine" onKeyUp="javascript:Count(this);" onChange="javascript:Count(this);" ></asp:TextBox>
22
scottyboiler

カスタム属性maxsize = "100"を使用

<asp:TextBox ID="txtAddress" runat="server"  maxsize="100"
      Columns="17" Rows="4" TextMode="MultiLine"></asp:TextBox>
   <script>
       $("textarea[maxsize]").each(function () {
         $(this).attr('maxlength', $(this).attr('maxsize'));
         $(this).removeAttr('maxsize'); 
       });
   </script>

これはこのようにレンダリングされます

<textarea name="ctl00$BodyContentPlac
eHolder$txtAddress" rows="4" cols="17" id="txtAddress" maxlength="100"></textarea>
4
Ashwini Jindal

JavaScriptを使用せずにtextareas（HTML5）でmaxlengthをサポートするブラウザー（Firefox、Chrome、Safari）でこれを修正する別の方法は、System.Web.UI.WebControls.TextBoxクラスのサブクラスを派生させ、Renderメソッドをオーバーライドすることです。次に、オーバーライドされたメソッドで、通常としてレンダリングする前にmaxlength属性を追加します。

protected override void Render(HtmlTextWriter writer)
{
    if (this.TextMode == TextBoxMode.MultiLine
        && this.MaxLength > 0)
    {
        writer.AddAttribute(HtmlTextWriterAttribute.Maxlength, this.MaxLength.ToString());
    }

    base.Render(writer);
}
4
Keith K
$('#txtInput').attr('maxLength', 100);
3
malinois

HTML5の変更点：

ASPX：

<asp:TextBox ID="txtBox" runat="server" maxlength="2000" TextMode="MultiLine"></asp:TextBox>

C＃：

if (!IsPostBack)
{
    txtBox.Attributes.Add("maxlength", txtBox.MaxLength.ToString());
}

レンダリングされたHTML：

<textarea name="ctl00$DemoContentPlaceHolder$txtBox" id="txtBox" maxlength="2000"></textarea>

Attributesのメタデータ：

概要：コントロールのプロパティに対応しない任意の属性（レンダリングのみ）のコレクションを取得します。

戻り値：System.Web.UI.AttributeCollection名前と値のペア。

3
Kristopher

サーバー側でアクセスするには、runat="server"でHTMLテキストエリアを使用します。このソリューションは、javascriptまたは正規表現を使用するよりも痛みが少ないです。

<textarea runat="server" id="txt1" maxlength="100" />

注：サーバー側でTextプロパティにアクセスするには、txt1.Valueの代わりにtxt1.Textを使用する必要があります

2
Ali Gonabadi

私はさまざまなアプローチを試しましたが、すべてにいくつかの弱点がありました（つまり、カットアンドペーストまたはブラウザの互換性）。これは私が今使用しているソリューションです：

function multilineTextBoxKeyUp(textBox, e, maxLength) {
    if (!checkSpecialKeys(e)) {
        var length = parseInt(maxLength);
        if (textBox.value.length > length) {
            textBox.value = textBox.value.substring(0, maxLength);
        }
    }
}

function multilineTextBoxKeyDown(textBox, e, maxLength) {
    var selectedText = document.selection.createRange().text;
    if (!checkSpecialKeys(e) && !e.ctrlKey && selectedText.length == 0) {
        var length = parseInt(maxLength);
        if (textBox.value.length > length - 1) {
            if (e.preventDefault) {
                e.preventDefault();
            }
            else {
                e.returnValue = false;
            }
        }
    }
}

function checkSpecialKeys(e) {
    if (e.keyCode != 8 && e.keyCode != 9 && e.keyCode != 33 && e.keyCode != 34 && e.keyCode != 35 && e.keyCode != 36 && e.keyCode != 37 && e.keyCode != 38 && e.keyCode != 39 && e.keyCode != 40) {
        return false;
    } else {
        return true;
    }
}

この場合、キーを押すとmultilineTextBoxKeyUpを呼び出し、キーを押すとmultilineTextBoxKeyDownを呼び出しています。

myTextBox.Attributes.Add("onkeyDown", "multilineTextBoxKeyDown(this, event, '" + maxLength + "');");
myTextBox.Attributes.Add("onkeyUp", "multilineTextBoxKeyUp(this, event, '" + maxLength + "');");
2
Sue Maurizio

this をご覧ください。それを解決する唯一の方法は、あなたが試みたようにjavascriptによることです。

EDIT：イベントをkeypressupに変更してみてください。

1
Christian13467

JavaScript/Jqueryの次の例は、それを行います。

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript">
     function count(text, event) {

         var keyCode = event.keyCode;

         //THIS IS FOR CONTROL KEY
         var ctrlDown = event.ctrlKey;

         var maxlength = $("#<%=txtMEDaiSSOWebAddress1.ClientID%>").val().length;

         if (maxlength < 200) {
             event.returnValue = true;
         }
         else {

             if ((keyCode == 8) || (keyCode == 9) || (keyCode == 46) || (keyCode == 33) || (keyCode == 27) || (keyCode == 145) || (keyCode == 19) || (keyCode == 34) || (keyCode == 37) || (keyCode == 39) || (keyCode == 16) || (keyCode == 18) ||
                 (keyCode == 38) || (keyCode == 40) || (keyCode == 35) || (keyCode == 36) || (ctrlDown && keyCode == 88) || (ctrlDown && keyCode == 65) || (ctrlDown && keyCode == 67) || (ctrlDown && keyCode == 86)) 

                  {
                 event.returnValue = true;
                  }

             else {

                 event.returnValue = false;
             }
         }

     }

     function substr(text)
      {
          var txtWebAdd = $("#<%=txtMEDaiSSOWebAddress1.ClientID%>").val();
          var substrWebAdd;
          if (txtWebAdd.length > 200) 
          {                 
              substrWebAdd = txtWebAdd.substring(0, 200);                                  
              $("#<%=txtMEDaiSSOWebAddress1.ClientID%>").val('');
              $("#<%=txtMEDaiSSOWebAddress1.ClientID%>").val(substrWebAdd); 

          }
     }
0
Nand kishor Kumar

私の場合、このスニペットは機能しました。私は解決策を探していましたが、将来の読者に役立つようにこれを書くことを考えました。

[〜＃〜] asp [〜＃〜]

<asp:TextBox ID="tbName" runat="server" MaxLength="250" TextMode="MultiLine" onkeyUp="return CheckMaxCount(this,event,250);"></asp:TextBox>

Javaスクリプト

function CheckMaxCount(txtBox,e, maxLength)
{
    if(txtBox)
    {  
        if(txtBox.value.length > maxLength)
        {
            txtBox.value = txtBox.value.substring(0, maxLength);
        }
        if(!checkSpecialKeys(e))
        {
            return ( txtBox.value.length <= maxLength)
        }
    }
}

function checkSpecialKeys(e)
{
    if(e.keyCode !=8 && e.keyCode!=46 && e.keyCode!=37 && e.keyCode!=38 && e.keyCode!=39 && e.keyCode!=40)
        return false;
    else
        return true;
}

@RaúlRoa Answerは、コピー/貼り付けの場合に役立ちました。これはしますが。

0
Afnan Ahmad

以下にその方法を示します（すべてのコードを1か所に保持します）。

<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"/>
<% TextBox1.Attributes["maxlength"] = "1000"; %>

2018年に誰かがまだウェブフォームを使用している場合に備えて。

0
Alex
$("textarea[maxlength]").on("keydown paste", function (evt) {
            if ($(this).val().length > $(this).prop("maxlength")) {
                if (evt.type == "paste") {
                    $(this).val($(this).val().substr(0, $(this).prop("maxlength")));
                } else {
                    if ([8, 37, 38, 39, 40, 46].indexOf(evt.keyCode) == -1) {
                        evt.returnValue = false;
                        evt.preventDefault();
                    }
                }
            }
        });
0
Alex

pageLoad Javascriptイベントで複数行テキストボックスの最大長を指定できます

function pageLoad(){
                     $("[id$='txtInput']").attr("maxlength","10");
                    }

txtInput multiline textboxのmax lengthプロパティをpageLoad（）Javascript関数で10文字に設定しました

0
Sumit Jambhale

ほぼすべての最新ブラウザーは、textarea要素のmaxlength属性の使用をサポートするようになりました。 （https://caniuse.com/#feat=maxlength）

複数行のTextBoxにmaxlength属性を含めるには、コードビハインドのAttributesコレクションを次のように変更します。

txtTextBox.Attributes["maxlength"] = "100";

コードビハインドを使用して指定する必要がない場合は、TextBoxから派生するカスタムコントロールを作成するだけです。

public class Textarea : TextBox
{
    public override TextBoxMode TextMode
    {
        get { return TextBoxMode.MultiLine; }
        set { }
    }

    protected override void OnPreRender(EventArgs e)
    {
        if (TextMode == TextBoxMode.MultiLine && MaxLength != 0)
        {
            Attributes["maxlength"] = MaxLength.ToString();
        }

        base.OnPreRender(e);
    }
}
0
Daniel Arant

これは@KeithKの答えと同じですが、詳細がいくつかあります。最初に、TextBoxに基づいて新しいコントロールを作成します。

using System.Web.UI;
using System.Web.UI.WebControls;

namespace MyProject
{
    public class LimitedMultiLineTextBox : System.Web.UI.WebControls.TextBox
    {
        protected override void Render(HtmlTextWriter writer)
        {
            this.TextMode = TextBoxMode.MultiLine;

            if (this.MaxLength > 0)
            {
                writer.AddAttribute(HtmlTextWriterAttribute.Maxlength, this.MaxLength.ToString());
            }

            base.Render(writer);
        }
    }
}

上記のコードは、常にテキストモードを複数行に設定することに注意してください。

これを使用するには、aspxページで登録する必要があります。 TagPrefixを使用して参照する必要があるため、これが必要です。そうしないと、コンパイルでカスタムジェネリックコントロールに関するエラーが発生します。

<%@ Register Assembly="MyProject" Namespace="MyProject" TagPrefix="mp" %>

<mp:LimitedMultiLineTextBox runat="server" Rows="3" ...
0
BurnsBA