javascript - HTML の最大長</h1> <div id="body"><p>How to restrict the maximum number of characters that can be entered into an HTML <code><textarea></code>? I'm looking for a cross-browser solution.</p> </div> <</a></h1> </div> <div class="d-flex fw-wrap pb8 mb16 bb bc-black-075" style="font-size:14px;margin-top:10px;"> <div class="flex--item ws-nowrap mr16 mb8" title="2022-04-17 15:46:40Z" > <span class="fc-light mr2">翻译自：<a href="https://stackoverflow.com/questions/43569" style="margin-right:20px;text-decoration:underline;" rel="nofollow">https://stackoverflow.com/questions/43569</a></span> <time itemprop="dateCreated" datetime="2008-09-04T11:59:41.237">2008-09-04T11:59:41.237</time> </div> <div class="flex--item ws-nowrap mb8" title="Viewed 6 times"> <span class="fc-light mr2"></span> 17969 次 </div> </div> <div id="mainbar" role="main" aria-label="question and answers"> <div class="question" data-questionid="4" data-position-on-page="0" data-score="763" id="question"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container d-flex jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="4"> <button class="js-vote-up-btn flex--item s-btn s-btnunset c-pointer " data-controller="s-tooltip" data-s-tooltip-placement="right" aria-pressed="false" aria-label="Up vote" data-selected-classes="fc-theme-primary" data-unselected-classes="" aria-describedby="--stacks-s-tooltip-peeufs8c"> <svg aria-hidden="true" class="svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 25h32L18 9 2 25Z"></path></svg> </button> <div id="--stacks-s-tooltip-peeufs8c" class="s-popover s-popovertooltip pe-none" aria-hidden="true" role="tooltip">This question shows research effort; it is useful and clear<div class="s-popover--arrow"></div></div> <div class="js-vote-count flex--item d-flex fd-column ai-center fc-black-500 fs-title" itemprop="upvoteCount" data-value=""> 17 </div> <button class="js-vote-down-btn flex--item s-btn s-btnunset c-pointer " data-controller="s-tooltip" data-s-tooltip-placement="right" aria-pressed="false" aria-label="Down vote" data-selected-classes="fc-theme-primary" data-unselected-classes="" aria-describedby="--stacks-s-tooltip-04106eqn"> <svg aria-hidden="true" class="svg-icon iconArrowDownLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 11h32L18 27 2 11Z"></path></svg> </button><div id="--stacks-s-tooltip-04106eqn" class="s-popover s-popovertooltip pe-none" aria-hidden="true" role="tooltip">This question does not show any research effort; it is unclear or not useful<div class="s-popover--arrow"></div></div> <div id="--stacks-s-tooltip-tgvwendx" class="s-popover s-popovertooltip pe-none" aria-hidden="true" role="tooltip">Bookmark this question.<div class="s-popover--arrow"></div></div> <a class="js-post-issue flex--item s-btn s-btnunset c-pointer py6 mx-auto" data-shortcut="T" data-ks-title="timeline" data-controller="s-tooltip" data-s-tooltip-placement="right" aria-label="Timeline" aria-describedby="--stacks-s-tooltip-abwmy15k"><svg aria-hidden="true" class="mln2 mr0 svg-icon iconHistory" width="19" height="18" viewBox="0 0 19 18"><path d="M3 9a8 8 0 1 1 3.73 6.77L8.2 14.3A6 6 0 1 0 5 9l3.01-.01-4 4-4-4h3L3 9Zm7-4h1.01L11 9.36l3.22 2.1-.6.93L10 10V5Z"></path></svg></a><div id="--stacks-s-tooltip-abwmy15k" class="s-popover s-popovertooltip pe-none" aria-hidden="true" role="tooltip">Show activity on this post.<div class="s-popover--arrow"></div></div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"> </div> <div class="mt24 mb12"> <div class="post-taglist d-flex gs4 gsy fd-column"> <div class="d-flex ps-relative fw-wrap"> <a href="/tags/javascript" class="post-tag js-gps-track" title="show questions tagged 'javascript'" rel="tag">javascript</a><a href="/tags/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a><a href="/tags/cross-browser" class="post-tag js-gps-track" title="show questions tagged 'cross-browser'" rel="tag">cross-browser</a><a href="/tags/textarea" class="post-tag js-gps-track" title="show questions tagged 'textarea'" rel="tag">textarea</a> </div> </div> </div> </div> <span class="d-none" itemprop="commentCount">4</span> </div> </div> <div class="js-zone-container zone-container-responsive"> <div id="dfp-isb" class="everyonelovesstackoverflow everyonelovesinline-sidebar mx-auto" style="min-height: auto; height: auto; display: none;"></div> <div class="js-report-ad-button-container mx-auto" style="width: 300px"></div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader d-flex ai-center mb8"> <div class="flex--item fl1"> <h2 class="mb0" data-answercount=""> 3 に答える <span style="display:none;" itemprop="answerCount">3</span> </h2> </div> </div> </div> <a name="7"></a> <div id="answer-7" class="answer js-answer accepted-answer" data-answerid="7" data-parentid="4" data-score="506" data-position-on-page="1" data-highest-scored="1" data-question-has-accepted-highest-score="1" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container d-flex jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="7"> <button class="js-vote-up-btn flex--item s-btn s-btnunset c-pointer " data-controller="s-tooltip" data-s-tooltip-placement="right" aria-pressed="false" aria-label="Up vote" data-selected-classes="fc-theme-primary" data-unselected-classes="" aria-describedby="--stacks-s-tooltip-dgvag2l3"> <svg aria-hidden="true" class="svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 25h32L18 9 2 25Z"></path></svg> </button><div id="--stacks-s-tooltip-dgvag2l3" class="s-popover s-popovertooltip pe-none" aria-hidden="true" role="tooltip">This answer is useful<div class="s-popover--arrow"></div></div> <div class="js-vote-count flex--item d-flex fd-column ai-center fc-black-500 fs-title" itemprop="upvoteCount" data-value="21"> 21 </div> <button class="js-vote-down-btn flex--item s-btn s-btnunset c-pointer " data-controller="s-tooltip" data-s-tooltip-placement="right" aria-pressed="false" aria-label="Down vote" data-selected-classes="fc-theme-primary" data-unselected-classes="" aria-describedby="--stacks-s-tooltip-gn8ppsfv"> <svg aria-hidden="true" class="svg-icon iconArrowDownLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 11h32L18 27 2 11Z"></path></svg> </button> </div> </div> <div class="answercell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"> <p>タグには、タグのように属性 <code>TEXTAREA</code>がありません。少なくとも、ほとんどの標準ブラウザではそうではありません。タグに<em>入力</em>できる文字数を制限する非常に簡単で効果的な方法は次のとおりです。<code>MAXLENGTH</code><code>INPUT</code><em></em><code>TEXTAREA</code></p> <pre><code><textarea onKeyPress="return ( this.value.length < 50 );"></textarea> </code></pre> <p><strong>注:</strong> は、バックスペースキー<em>を含む</em><strong>すべてのボタン</strong><code>onKeyPress</code>を押すのを防ぎます。<strong></strong> <em></em></p> <p>これが機能するのは、ブール式が、新しい文字が追加される前のフィールドの長さを必要な最大長 (この例では 50、ここでは独自のものを使用) と比較し、あと 1 文字分の余裕がある場合は true を返し、そうでない場合は true を返すため<code>false</code>です。ほとんどのイベントから false を返すと、デフォルトアクションがキャンセルされます。そのため、現在の長さがすでに 50 (またはそれ以上) の場合、ハンドラーは false を返し、<code>KeyPress</code>アクションはキャンセルされ、文字は追加されません。</p> <p>軟膏の 1 つのハエは、このチェックを回避して<code>TEXTAREA</code>、イベントを発生させないに貼り付ける可能性です。<code>KeyPress</code>Internet Explorer 5 以降には、<code>onPaste</code>ハンドラーにチェックを含めることができるイベントが含まれています。ただし、クリップボードで待機中の文字数も考慮して、合計が制限を超えるかどうかを判断する必要があることに注意してください。さいわい、IE には window オブジェクトのクリップボードオブジェクトも含まれています。<a href="http://lists.evolt.org/archive/Week-of-Mon-20040315/156773.html" rel="nofollow noreferrer">1</a>つまり:</p> <pre><code><textarea onKeyPress="return ( this.value.length < 50 );" onPaste="return (( this.value.length + window.clipboardData.getData('Text').length) < 50 );"></textarea> </code></pre> <p>繰り返しますが、<code>onPaste</code>イベントと<code>clipboardData</code>オブジェクトは IE 5+ のみです。クロスブラウザーソリューションの場合は、<code>OnChange</code>or<code>OnBlur</code>ハンドラーを使用して長さを確認し、必要に応じて処理するだけです (値をサイレントに切り捨てる、ユーザーに通知するなど)。残念ながら、これは発生しているエラーをキャッチするのではなく、ユーザーがフィールドを離れようとしたときにのみ発生します。これはあまり友好的ではありません。</p> <p><a href="http://lists.evolt.org/archive/Week-of-Mon-20040315/156773.html" rel="nofollow noreferrer">ソース</a></p> <p>また、ページに含めることができる完成したスクリプトを含む別の方法もあります。</p> <p><a href="http://cf-bill.blogspot.com/2005/05/textarea-maxlength-revisited.html" rel="nofollow noreferrer">http://cf-bill.blogspot.com/2005/05/textarea-maxlength-revisited.html</a></p> </div> <div class="mt24"> <div class="user-action-time" style="color:#999;text-align:right;">于 2008-09-04T12:02:01.073 に答える</div> </div> </div> </div> </div><a name="7"></a> <div id="answer-7" class="answer js-answer accepted-answer" data-answerid="7" data-parentid="4" data-score="506" data-position-on-page="1" data-highest-scored="1" data-question-has-accepted-highest-score="1" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container d-flex jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="7"> <button class="js-vote-up-btn flex--item s-btn s-btnunset c-pointer " data-controller="s-tooltip" data-s-tooltip-placement="right" aria-pressed="false" aria-label="Up vote" data-selected-classes="fc-theme-primary" data-unselected-classes="" aria-describedby="--stacks-s-tooltip-dgvag2l3"> <svg aria-hidden="true" class="svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 25h32L18 9 2 25Z"></path></svg> </button><div id="--stacks-s-tooltip-dgvag2l3" class="s-popover s-popovertooltip pe-none" aria-hidden="true" role="tooltip">This answer is useful<div class="s-popover--arrow"></div></div> <div class="js-vote-count flex--item d-flex fd-column ai-center fc-black-500 fs-title" itemprop="upvoteCount" data-value="6"> 6 </div> <button class="js-vote-down-btn flex--item s-btn s-btnunset c-pointer " data-controller="s-tooltip" data-s-tooltip-placement="right" aria-pressed="false" aria-label="Down vote" data-selected-classes="fc-theme-primary" data-unselected-classes="" aria-describedby="--stacks-s-tooltip-gn8ppsfv"> <svg aria-hidden="true" class="svg-icon iconArrowDownLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 11h32L18 27 2 11Z"></path></svg> </button> </div> </div> <div class="answercell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"> <p>HTML5 では、<a href="https://developer.mozilla.org/en/docs/Web/HTML/Element/textarea#attr-maxlength" rel="nofollow"><code>maxlength</code>の属性が<code><textarea></code></a>許可されるようになりました。</p> <p>IE <= 9 および iOS Safari 8.4 を除くすべてのブラウザでサポートされています。<a href="http://caniuse.com/#feat=maxlength" rel="nofollow">caniuse.com のサポート表を</a>参照してください。</p> </div> <div class="mt24"> <div class="user-action-time" style="color:#999;text-align:right;">于 2012-08-14T17:29:26.377 に答える</div> </div> </div> </div> </div><a name="7"></a> <div id="answer-7" class="answer js-answer accepted-answer" data-answerid="7" data-parentid="4" data-score="506" data-position-on-page="1" data-highest-scored="1" data-question-has-accepted-highest-score="1" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container d-flex jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="7"> <button class="js-vote-up-btn flex--item s-btn s-btnunset c-pointer " data-controller="s-tooltip" data-s-tooltip-placement="right" aria-pressed="false" aria-label="Up vote" data-selected-classes="fc-theme-primary" data-unselected-classes="" aria-describedby="--stacks-s-tooltip-dgvag2l3"> <svg aria-hidden="true" class="svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 25h32L18 9 2 25Z"></path></svg> </button><div id="--stacks-s-tooltip-dgvag2l3" class="s-popover s-popovertooltip pe-none" aria-hidden="true" role="tooltip">This answer is useful<div class="s-popover--arrow"></div></div> <div class="js-vote-count flex--item d-flex fd-column ai-center fc-black-500 fs-title" itemprop="upvoteCount" data-value="-2"> -2 </div> <button class="js-vote-down-btn flex--item s-btn s-btn__unset c-pointer " data-controller="s-tooltip" data-s-tooltip-placement="right" aria-pressed="false" aria-label="Down vote" data-selected-classes="fc-theme-primary" data-unselected-classes="" aria-describedby="--stacks-s-tooltip-gn8ppsfv"> <svg aria-hidden="true" class="svg-icon iconArrowDownLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 11h32L18 27 2 11Z"></path></svg> </button> </div> </div> <div class="answercell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"> <pre><code>$(function(){ $("#id").keypress(function() { var maxlen = 100; if ($(this).val().length > maxlen) { return false; } }) }); </code></pre> <p><a href="https://stackoverflow.com/questions/4459610/set-maxlength-in-html-textarea">Html Textarea の</a>参照セット maxlength<a href="https://stackoverflow.com/questions/4459610/set-maxlength-in-html-textarea"></a></p> </div> <div class="mt24"> <div class="user-action-time" style="color:#999;text-align:right;">于 2014-04-11T06:59:34.410 に答える</div> </div> </div> </div> </div></div> </div> <div id="sidebar" class="show-votes" role="complementary" aria-label="sidebar"> <div class="module sidebar-related"> <h4 id="h-related">Related</h4> <div class="related js-gps-related-questions" data-tracker="rq=1"> <div class="spacer"> <a href="/questions/19976318" title="Question score (upvotes - downvotes)"> <div class="answer-votes large">1</div> </a> <a href="/questions/19976318" class="question-hyperlink">matlab - Simulink の MATLAB 関数への連続信号</a> </div><div class="spacer"> <a href="/questions/19976319" title="Question score (upvotes - downvotes)"> <div class="answer-votes large">2</div> </a> <a href="/questions/19976319" class="question-hyperlink">asp.net - else エラーが asp.net で発生する</a> </div><div class="spacer"> <a href="/questions/19976322" title="Question score (upvotes - downvotes)"> <div class="answer-votes large">2</div> </a> <a href="/questions/19976322" class="question-hyperlink">lua - Luaで配列に要素の頻度をカウントする</a> </div><div class="spacer"> <a href="/questions/19976324" title="Question score (upvotes - downvotes)"> <div class="answer-votes large">1</div> </a> <a href="/questions/19976324" class="question-hyperlink">sql - 基準によって行を数える T-SQL 最速の方法</a> </div><div class="spacer"> <a href="/questions/19976325" title="Question score (upvotes - downvotes)"> <div class="answer-votes large">1</div> </a> <a href="/questions/19976325" class="question-hyperlink">html - オブジェクトが重なっている場合、ネストされたフローティング div を持つ親の負のマージンは親に従いません</a> </div><div class="spacer"> <a href="/questions/19976326" title="Question score (upvotes - downvotes)"> <div class="answer-votes large">1</div> </a> <a href="/questions/19976326" class="question-hyperlink">excel - Web ページからリンク/URL を取得する - Excel VBA</a> </div><div class="spacer"> <a href="/questions/19976328" title="Question score (upvotes - downvotes)"> <div class="answer-votes large">1</div> </a> <a href="/questions/19976328" class="question-hyperlink">php - JSONとしてのMongo結果</a> </div><div class="spacer"> <a href="/questions/19976332" title="Question score (upvotes - downvotes)"> <div class="answer-votes large">2</div> </a> <a href="/questions/19976332" class="question-hyperlink">ios - スクリーンショット用にプログラムで画面を制限する</a> </div><div class="spacer"> <a href="/questions/19976336" title="Question score (upvotes - downvotes)"> <div class="answer-votes large">1</div> </a> <a href="/questions/19976336" class="question-hyperlink">google-analytics - Google アナリティクスページトラッキングを除外する</a> </div><div class="spacer"> <a href="/questions/19976338" title="Question score (upvotes - downvotes)"> <div class="answer-votes large">1</div> </a> <a href="/questions/19976338" class="question-hyperlink">angularjs - ディレクティブからコントローラーをリフレッシュする方法は?</a> </div> </div> </div> <div class="module js-gps-related-tags" id="related-tags"> <h4 id="h-related-tags">Reference</h4> <div data-name="javascript"> <a href="https://php.github.net.cn" class="post-tag no-tag-menu js-gps-track" >php</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">1429865</span> </span> </div> <div data-name="javascript"> <a href="https://c-cpp.com" class="post-tag no-tag-menu js-gps-track" >c/c++</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">756500</span> </span> </div> <div data-name="javascript"> <a href="https://nginx.github.net.cn" class="post-tag no-tag-menu js-gps-track" target="_blank">nginx</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">49975</span> </span> </div> <div data-name="javascript"> <a href="https://mongodb.net.cn" class="post-tag no-tag-menu js-gps-track" >mongodb</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">159057</span> </span> </div> <div data-name="javascript"> <a href="https://mybatis.net.cn" class="post-tag no-tag-menu js-gps-track" >mybatis</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">3233</span> </span> </div> <div data-name="javascript"> <a href="https://anaconda.org.cn" class="post-tag no-tag-menu js-gps-track" >anaconda</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">13410</span> </span> </div> <div data-name="javascript"> <a href="https://pycharm.net.cn" class="post-tag no-tag-menu js-gps-track" >pycharm</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">14671</span> </span> </div> <div data-name="javascript"> <a href="https://python.github.net.cn" class="post-tag no-tag-menu js-gps-track" >python</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">1902243</span> </span> </div> <div data-name="javascript"> <a href="https://vscode.github.net.cn" class="post-tag no-tag-menu js-gps-track" >vscode</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">56040</span> </span> </div> <div data-name="javascript"> <a href="https://dockerdocs.cn" class="post-tag no-tag-menu js-gps-track" >docker</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">110988</span> </span> </div> <div data-name="javascript"> <a href="https://github.net.cn" class="post-tag no-tag-menu js-gps-track" >github</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">49000</span> </span> </div> <div data-name="javascript"> <a href="https://flask.github.net.cn" class="post-tag no-tag-menu js-gps-track" >flask</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">49129</span> </span> </div> <div data-name="javascript"> <a href="https://ffmpeg.github.net.cn" class="post-tag no-tag-menu js-gps-track" >ffmpeg</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">24037</span> </span> </div> <div data-name="javascript"> <a href="https://jmeter.net" class="post-tag no-tag-menu js-gps-track" >jmeter</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">16910</span> </span> </div> <div data-name="javascript"> <a href="https://matplotlib.net" class="post-tag no-tag-menu js-gps-track" >matplotlib</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">63493</span> </span> </div> <div data-name="javascript"> <a href="https://getbootstrap.net" class="post-tag no-tag-menu js-gps-track" >bootstrap</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">54641</span> </span> </div> </div> </div> </div> </div> </div> </div> <footer id="footer" class="site-footer js-footer" role="contentinfo"> <div class="site-footer--container"> <div class="site-footer--logo"> <a href="https://stackoverflow.com"><svg aria-hidden="true" class="native svg-icon iconLogoGlyphMd" width="32" height="37" viewBox="0 0 32 37"><path d="M26 33v-9h4v13H0V24h4v9h22Z" fill="#BCBBBB"/><path d="m21.5 0-2.7 2 9.9 13.3 2.7-2L21.5 0ZM26 18.4 13.3 7.8l2.1-2.5 12.7 10.6-2.1 2.5ZM9.1 15.2l15 7 1.4-3-15-7-1.4 3Zm14 10.79.68-2.95-16.1-3.35L7 23l16.1 2.99ZM23 30H7v-3h16v3Z" fill="#F48024"/></svg></a> </div> <nav class="site-footer--nav"> <div class="site-footer--col"> <h5 class="-title"><a href="https://stackoverflow.jp" class="js-gps-track" data-gps-track="footer.click({ location: 3, link: 15})">Stack Overflow 日本語サイト</a></h5> <p>CC BY-SA知識共有ライセンス契約に従う。</p> </div> </nav> </div> </footer> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?709ff2ad9744e86b5b0eee677fc13ede"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-1MW5BV8G8E"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-1MW5BV8G8E'); </script> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6117966252207595" crossorigin="anonymous"></script> </body> </html>