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与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

设置固定的宽度和高度

<强> Fiddle Demo

如何仅增加文字大小？

4 个答案: