亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

限制textarea中的行數并使用jQuery顯示行數

限制textarea中的行數并使用jQuery顯示行數

我想使用jQuery:將用戶可以在文本區域中輸入的行數限制為設置的數字使行計數器出現,以在輸入行時更新行數回車鍵或/ n將計為行感謝任何可以幫助的人!$(document).ready(function(){  $('#countMe').keydown(function(event) {    // If number of lines is > X (specified by me) return false    // Count number of lines/update as user enters them turn red if over limit.  });   });<form class="lineCount">  <textarea id="countMe" cols="30" rows="5"></textarea><br>  <input type="submit" value="Test Me"></form><div class="theCount">Lines used = X (updates as lines entered)<div>對于此示例,可以說將允許的行數限制為10。謝謝大家!
查看完整描述

3 回答

?
jeck貓

TA貢獻1909條經驗 獲得超7個贊

這是很少的改進代碼。在前面的示例中,您可以粘貼帶有更多行的文本。


的HTML


<textarea data-max="10"></textarea>

<div class="theCount">Lines used: <span id="linesUsed">0</span></div>

JS


jQuery('document').on('keyup change', 'textarea', function(e){


        var maxLines = jQuery(this).attr('data-max');        

        newLines = $(this).val().split("\n").length;


        console.log($(this).val().split("\n"));


        if(newLines >= maxLines) {

            lines = $(this).val().split("\n").slice(0, maxLines);

            var newValue = lines.join("\n");

            $(this).val(newValue);

            $("#linesUsed").html(newLines);

            return false;

        }


    });


查看完整回答
反對 回復 2019-12-02
?
喵喵時光機

TA貢獻1846條經驗 獲得超7個贊

一個非常丑陋但以某種方式起作用的示例指定了textarea行


<textarea rows="3"></textarea>

然后在js中


   $("textarea").on('keydown keypress keyup',function(e){

       if(e.keyCode == 8 || e.keyCode == 46){

           return true;

       }

       var maxRowCount = $(this).attr("rows") || 2;

        var lineCount = $(this).val().split('\n').length;

        if(e.keyCode == 13){

            if(lineCount == maxRowCount){

                return false;

            }

        }

        var jsElement = $(this)[0];

        if(jsElement.clientHeight < jsElement.scrollHeight){

            var text = $(this).val();

            text= text.slice(0, -1);

            $(this).val(text);

            return false;

        }


    });


查看完整回答
反對 回復 2019-12-02
  • 3 回答
  • 0 關注
  • 1707 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號