如何僅增加文字大小？

Question

我有一個代碼，我通過它增加文本區域中的文本的大小，我能夠通過給定的代碼執行此操作，但這是我的一個問題，當增加文本的大小時，它也增加了文本區域的大小和我不想要這個，也想讓文本區域可滾動

代碼如下：

<HTML>
<head>


<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>


<script>
$(function () {
    $('select[name="font"]').on('change', function () {
      $('textarea').css('font-family', this.value);

    });
});
</script>
</head>



<body>
Select Programming font:
<select name="font">
    <option value="arial">arial black</option>
    <option value="tahoma">tahoma</option>
    <option value="times new roman">times new roman</option>
    <option value="calibri">calibri</option>
</select>

<select onchange="$('#txt').css('font-size', event.target.value + 'px')">
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="30">30</option>
</select>

<br>EnterValue:
<textarea id="txt" rows="4" cols="50">Test Test</textarea>

</body>
</html>

Answer 1

使用CSS為您的textarea提供特定尺寸。 然后，您可以將overflow屬性設置為auto，這將使瀏覽器自動呈現適當的滾動條：

#txt{
    height:40px;
    width:200px;
    overflow:auto;
}

的jsfiddle

Answer 2

使用css resize:none;overflow:auto;width:100px;height:50px with textarea

<textarea id="txt" rows="4" cols="50" style="resize:none;overflow:auto;width:300px;height:50px">Test Test</textarea>

演示： http ： //jsfiddle.net/9BGT2/

Answer 3

<textarea id="txt" rows="4" cols="50" style="width:400px;height:100px">Test Test</textarea>

Answer 4

您可以在更改字體大小之前獲取textarea的寬度和高度，然后將其設置回textarea ：

$(function () {
    var width = $('textarea').width(),
        height = $('textarea').height();
    $('select[name="font"]').on('change', function () {
        $('textarea').css('font-family', this.value);
        $('textarea').width(width);
        $('textarea').height(height);
    }).change();
});

此解決方案不需要您為textarea設置固定的寬度和高度

小提琴演示

如何僅增加文字大小？

問題描述

4 個解決方案

解決方案1
2 2014-03-05 12:56:04

解決方案2
0 已采納 2014-03-05 12:54:59

解決方案3
0 2014-03-05 12:55:57

解決方案4
0 2014-03-05 13:03:15

如何僅增加文字大小？

問題描述

4 個解決方案

解決方案1 2 2014-03-05 12:56:04

解決方案2 0 已采納 2014-03-05 12:54:59

解決方案3 0 2014-03-05 12:55:57

解決方案4 0 2014-03-05 13:03:15

解決方案1
2 2014-03-05 12:56:04

解決方案2
0 已采納 2014-03-05 12:54:59

解決方案3
0 2014-03-05 12:55:57

解決方案4
0 2014-03-05 13:03:15