ホームページ > 記事 > ウェブフロントエンド > TextArea は、MaxLength 属性の最大入力値を設定します。 js code_javascript スキル

TextArea は、MaxLength 属性の最大入力値を設定します。 js code_javascript スキル

WBOYオリジナル: 2016-05-16 17:46:081150ブラウズ

標準 DHTML ドキュメントの TEXTAREA の MAXLENGTH 属性は、デフォルトでは機能せず、イベントが発生した場合にのみ機能します
次のように: http://spiderscript.net/site/spiderscript/examples/ex_textarea_maxlength.asp
しかし、TEXT は存在し、機能します。
では、入力コンテンツが TEXTAREA の文字数を超えることができないことをどのように認識するのでしょうか?

方法 1、数文字のコンテンツのみをインターセプトする必要がある場合は、次のことができます:

コードをコピーコードは次のとおりです。

または

コードをコピーコードは次のとおりです:

方法 2,

コードをコピーコードは次のとおりです:

この方法では切り捨て方式を使用します。最後の文字を入力すると、再度入力するとカーソルが点滅します。ただし、CTRL C を使用してコピーする場合の長さ制限の問題は解決できますが、マウスを使用してコピーする場合はまだ機能しません。

メソッド 3、このメソッドは入力

コードの長さを直接決定しますコードは次のとおりです。

onkeypress ="return assignMaxLength(this, 15);" >

入力内容が 15 より大きい場合、この実装ではカーソルの問題は表示されません。ちらつきますが、コピーされた長さは解決しません。制限の問題は、コピーされたコンテンツが最大長の制限を超える可能性があることです。
return (Object.value.length
メソッド 4
) に変更しました。方法 2 と方法 3 に基づくさらなる最適化。客観的に言えば、メソッド 2 と 3 は作業の一部のみを実行します

コードをコピーしますコードは次のとおりです:

/mce: script>

cols="45" <BR>rows="3" <BR>wrap= "virtual" <BR>onkeypress="return(this.value.length<20)" <BR>onkeydown="textlen(this,20)" <BR>onkeyup="textlen(this,20)" <BR>onblur ="maxtext (this,20)" <BR>> <BR><BR><BR>上記のメソッドは独自に onblur イベントを追加します。これは主に、ユーザーがテキストの転送を入力ではなくコピー＆ペーストで完了した場合の問題に対処するために使用されます。実際には、方法 2 と方法 3 を組み合わせたものです。 以下は、TextArea の maxlength 属性を追加して使用し、上記の例と組み合わせた結果です。<html><head><script type="text/javascript">function ismaxlength(obj){var mlength =obj.getAttribute? parseInt(obj.getAttribute("maxlength")): ""if (obj.getAttribute && obj.value.length>mlength)alert('このテキスト ボックスでは、最大長「mlength」を入力できます制限を超えた内容は Truncate ")obj.value=obj.value.substring(0,mlength)}function impimMaxLength(obj){ var mlength=obj.getAttribute? parseInt(obj.getAttribute("maxlength" )) : "" return (obj.value .length <mlength><br><strong>JavaScript コード</strong> <br>---- -------------------------------------- ---------- -------------------------------------- <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="33476" class="copybut" id="copybut33476" onclick="doCopy('code33476')"><u>コードをコピーします</u></a></span> コードは次のとおりです:</div>
<div class="codebody" id="code33476"> <br>function SetTextAreaMaxLength(controlId,length) <br>{ <br>// TextArea 用の JScript ファイル <br>// ユーザーが maxLength 文字を超える文字を入力できないようにします <br>function doKeypress(control,length){ <br>maxLength = 長さ; <br>値 = control.value; <br>if(maxLength && value.length > maxLength-1){ <br>event.returnValue = false; <br>maxLength = parseInt(maxLength); <br>} <br>} <br>// デフォルトの動作をキャンセルします <br>function doBeforePaste(control,length){ <br>maxLength = length; <br>if(maxLength) <br>{ <br>event.returnValue = false; <br>} <br>} <br>// デフォルトの動作をキャンセルし、新しい貼り付けルーチンを作成します。 <br>function doPaste(control,length){ <br>maxLength = length; <br>値 = control.value; <br>if(maxLength){ <br>event.returnValue = false; <br>maxLength = parseInt(maxLength); <br>var oTR = control.document.selection.createRange(); <br>var iInsertLength = maxLength - value.length oTR.text.length; <br>var sData = window.clipboardData.getData("Text").substr(0,iInsertLength); <br>oTR.text = sData; <br>} <br>} <br>function doDragenter(control,length) <br>{ <br>maxLength = length; <br>値 = control.value; <br>if(maxLength){ <br>event.returnValue = false; <br>} <br>} <br>関数 addEvent(elm, evType, fn, useCapture) <br>{ <br>if (elm.addEventListener) <br>{ <br>elm.addEventListener(evType, fn, useCapture); <br>true を返します。 <br>} <br>else if (elm.attachEvent) <br>{ <br>var r = elm.attachEvent('on' evType, fn); <br>r を返します; <br>} <br>else { <br>elm['on' evType] = fn; <br>} <br>} <br>function AttacheventTextAreaBeforePaste(obj,length) <br>{ <br>return function() <br>{ <br>doBeforePaste(obj,length) <br>} <br>} <br>function AttacheventTextAreaPaste(obj,length) <br>{ <br>return function() <br>{ <br>doPaste(obj,length) <br>} <br>} <br>function AttacheventTextAreaKeyPress(obj, length) <br>{ <br>return function() <br>{ <br>doKeypress(obj,length) <br>} <br>} <br>function AttacheventTextAreaDragEnter(obj,length) <br>{ <br>return function() <br>{ <br>doDragenter(obj,length); <br>} <br>} <br>var obj = document.getElementById(controlId); <br>addEvent(obj,'keypress',AttacheventTextAreaKeyPress(obj,length),null); <br>addEvent(obj,'beforepaste',AttacheventTextAreaBeforePaste(obj,length),null); <br>addEvent(obj,'paste',AttacheventTextAreaPaste(obj,length),null); <br>addEvent(obj,'dragenter',AttacheventTextAreaDragEnter(obj,length),null); <br>} <br>function SetTextAreaMaxLength(controlId,length) <br>{ <br>// TextArea 用の JScript ファイル <br>// ユーザーが maxLength 文字を超える文字を入力できないようにします <br>function doKeypress(control,length) { <br>maxLength = 長さ; <br>値 = control.value; <br>if(maxLength && value.length > maxLength-1){ <br>event.returnValue = false; <br>maxLength = parseInt(maxLength); <br>} <br>} <br>// デフォルトの動作をキャンセルします <br>function doBeforePaste(control,length){ <br>maxLength = length; <br>if(maxLength) <br>{ <br>event.returnValue = false; <br>} <br>} <br>// デフォルトの動作をキャンセルし、新しい貼り付けルーチンを作成します。 <br>function doPaste(control,length){ <br>maxLength = length; <br>値 = control.value; <br>if(maxLength){ <br>event.returnValue = false; <br>maxLength = parseInt(maxLength); <br>var oTR = control.document.selection.createRange(); <br>var iInsertLength = maxLength - value.length oTR.text.length; <br>var sData = window.clipboardData.getData("Text").substr(0,iInsertLength); <br>oTR.text = sData; <br>} <br>} <br>function doDragenter(control,length) <br>{ <br>maxLength = length; <br>値 = control.value; <br>if(maxLength){ <br>event.returnValue = false; <br>} <br>} <br>関数 addEvent(elm, evType, fn, useCapture) <br>{ <br>if (elm.addEventListener) <br>{ <br>elm.addEventListener(evType, fn, useCapture); <br>true を返します。 <br>} <br>else if (elm.attachEvent) <br>{ <br>var r = elm.attachEvent('on' evType, fn); <br>r を返します; <br>} <br>else { <br>elm['on' evType] = fn; <br>} <br>} <br>function AttacheventTextAreaBeforePaste(obj,length) <br>{ <br>return function() <br>{ <br>doBeforePaste(obj,length) <br>} <br>} <br>function AttacheventTextAreaPaste(obj,length) <br>{ <br>return function() <br>{ <br>doPaste(obj,length) <br>} <br>} <br>function AttacheventTextAreaKeyPress(obj, length) <br>{ <br>return function() <br>{ <br>doKeypress(obj,length) <br>} <br>} <br>function AttacheventTextAreaDragEnter(obj,length) <br>{ <br>return function() <br>{ <br>doDragenter(obj,length); <br>} <br>} <br>var obj = document.getElementById(controlId); <br>addEvent(obj,'keypress',AttacheventTextAreaKeyPress(obj,length),null); <br>addEvent(obj,'beforepaste',AttacheventTextAreaBeforePaste(obj,length),null); <br>addEvent(obj,'paste',AttacheventTextAreaPaste(obj,length),null); <br>addEvent(obj,'dragenter',AttacheventTextAreaDragEnter(obj,length),null); <br>} <br>
</div>
<br>-------------------------------------------------- ----------------------------------------<br><strong>HTML code</strong> <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="60180" class="copybut" id="copybut60180" onclick="doCopy('code60180')"><u>Copy code</u></a></span> The code is as follows:</div>
<div class="codebody" id="code60180"> <br><asp :TextBox ID="TextBoxAddress" runat="server" Width="200px" <BR>TextMode="MultiLine" Height="113px" MaxLength="10"></asp:TextBox> <br><script language="javascript" type="text/javascript"> <br>SetTextAreaMaxLength('<%=TextBoxAddress.ClientID %>',10); <br></script> <br>
</div></mlength></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明：</span><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事：<a class="dBlack" title="JS が画像をアップロードする前の制限には、(jpg、jpg、gif、サイズ、高さ、幅) などが含まれます。" href="https://m.php.cn/ja/faq/18289.html">JS が画像をアップロードする前の制限には、(jpg、jpg、gif、サイズ、高さ、幅) などが含まれます。</a></span><span>次の記事：<a class="dBlack" title="JS が画像をアップロードする前の制限には、(jpg、jpg、gif、サイズ、高さ、幅) などが含まれます。" href="https://m.php.cn/ja/faq/18291.html">JS が画像をアップロードする前の制限には、(jpg、jpg、gif、サイズ、高さ、幅) などが含まれます。</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="https://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ja/faq/1609.html" title="Bootstrap リスト グループ コンポーネントの詳細な分析" class="aBlack">Bootstrap リスト グループ コンポーネントの詳細な分析</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/1640.html" title="JavaScript関数のカリー化の詳細説明" class="aBlack">JavaScript関数のカリー化の詳細説明</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/1949.html" title="JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)" class="aBlack">JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/2248.html" title="Angularjs は WeChat UI (weui) を統合します" class="aBlack">Angularjs は WeChat UI (weui) を統合します</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/2351.html" title="JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル" class="aBlack">JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</p></div><div class="footermid"><a href="https://m.php.cn/ja/about/us.html">私たちについて</a><a href="https://m.php.cn/ja/about/disclaimer.html">免責事項</a><a href="https://m.php.cn/ja/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p>                © php.cn All rights reserved
            </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
    var _times = times || -1, //100次
    _interval = interval || 20, //20毫秒每次
    _self = this,
    _selector = this.selector, //选择器
    _iIntervalID; //定时器id
    if( this.length ){ //如果已经获取到了，就直接执行函数
        func && func.call(this);
    } else {
        _iIntervalID = setInterval(function() {
            if(!_times) { //是0就退出
                clearInterval(_iIntervalID);
            }
            _times <= 0 || _times--; //如果是正数就 --

_self = $(_selector); //再次选择
            if( _self.length ) { //判断是否取到
                func && func.call(_self);
                clearInterval(_iIntervalID);
            }
        }, _interval);
    }
    return this;
}
$("table.syntaxhighlighter").wait(function() {
    $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
      $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>