Question

我想知道，当我有textarea并且内部文字接近边界时，我需要它去第二行，而最重要的部分使textarea更高一行

textarea{
width: 100%;
    border-radius: 4px;
    background-color: #f9f9fb;
    border: solid 1px #edeef0;
    padding: 6px 40px 6px 20px;
    color: #000000;
    height: 35px;
    max-height: 100px;
    max-width: 150px;
}

<textarea placeholder="Add a comment"></textarea>

Answer 1

你的填充权越高，将其设置为0，

padding: 6px 0px 6px 20px;

Answer 2

尝试自动增长库：https://github.com/jaz303/jquery-grab-bag/blob/master/javascripts/jquery.autogrow-textarea.js

＆＃13;

textarea{
width: 100%;
    border-radius: 4px;
    background-color: #f9f9fb;
    border: solid 1px #edeef0;
    padding: 6px 40px 6px 20px;
    color: #000000;
    height: 35px;
    max-height: 100px;
    max-width: 150px;
}

＆＃13;

<body>
        <textarea placeholder="Add a comment"></textarea>
    <!-- this is same script as link above -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 
    <script>!function(a){a.fn.autogrow=function(b){return this.filter("textarea").each(function(){var c=this,d=a(c),e=d.height(),f=d.hasClass("autogrow-short")?0:parseInt(d.css("lineHeight"))||0,g=a.extend({preGrowCallback:null,postGrowCallback:null},b),h=a("<div></div>").css({position:"absolute",top:-1e4,left:-1e4,width:d.width(),fontSize:d.css("fontSize"),fontFamily:d.css("fontFamily"),fontWeight:d.css("fontWeight"),lineHeight:d.css("lineHeight"),resize:"none","word-wrap":"break-word"}).appendTo(document.body),i=function(a){var b=function(a,b){for(var c=0,d="";c<b;c++)d+=a;return d},i=c.value.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/\n$/,"<br/>&#xa0;").replace(/\n/g,"<br/>").replace(/ {2,}/g,function(a){return b("&#xa0;",a.length-1)+" "});a&&a.data&&"keydown"===a.data.event&&13===a.keyCode&&(i+="<br />"),h.css("width",d.width()),h.html(i+(0===f?"...":""));var j=Math.max(h.height()+f,e);null!=g.preGrowCallback&&(j=g.preGrowCallback(d,h,j,e)),d.height(j),null!=g.postGrowCallback&&g.postGrowCallback(d)};d.change(i).keyup(i).keydown({event:"keydown"},i),a(window).resize(i),i()})}}(jQuery);</script>
    <script>
        $("textarea").autogrow();
    </script>
    </body>

<!-- begin snippet: js hide: false console: true babel: false -->

＆＃13;

当文本靠近边框时，在textarea中创建第二行

2 个答案: