使用 jQuery 扩展 textarea

在 Web 开发中，textarea 是常用的表单控件之一，它通常用于收集大段文字输入，如用户评论、文章内容等。然而，原生的 textarea 很容易出现问题，比如高度无法自适应、不支持自动缩放等。

这时候我们可以使用 jQuery 来扩展 textarea 的功能，以实现更好的用户体验。下面介绍一些实用的 jQuery 插件和技巧。

插件

autosize

autosize 是一个能够自动调整 textarea 大小的 jQuery 插件。它可以根据文字内容自动扩展和收缩 textarea 的高度，以让用户更方便地输入文本。

使用方法非常简单，只需要引入 autosize 插件和 jQuery 库，然后对 textarea 进行初始化即可。示例代码如下：

// 引入 jQuery 和 autosize
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/4.0.2/autosize.min.js"></script>

// 对 textarea 进行初始化
<script>
  $(document).ready(function(){
    $(textarea).autosize();
  });
</script>

emojiarea

emojiarea 是一个能够在 textarea 中输入 Emoji 表情符号的 jQuery 插件。它可以让用户在评论、聊天等场景中更加生动地表达自己的情感和感受。

使用方法也很简单，只需要引入 emojiarea 和 jQuery 库，然后对 textarea 进行初始化即可。示例代码如下：

// 引入 jQuery 和 emojiarea
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://github.com/diy/jquery-emojiarea/blob/master/dist/jquery.emojiarea.js"></script>

// 对 textarea 进行初始化
<script>
  $(document).ready(function(){
    $(textarea).emojiarea();
  });
</script>

markdown-editor

markdown-editor 是一个能够在 textarea 中实时预览 Markdown 渲染结果的 jQuery 插件。它可以让用户在写作、博客发表等场景中更加直观地编辑和呈现文章内容。

使用方法非常简单，只需要引入 markdown-editor 和 jQuery 库，然后对 textarea 进行初始化即可。示例代码如下：

// 引入 jQuery 和 markdown-editor
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://github.com/jbt/markdown-editor/blob/master/markdown-editor.js"></script>

// 对 textarea 进行初始化
<script>
  $(document).ready(function(){
    $(textarea).markdown();
  });
</script>

技巧

除了引入插件，我们还可以使用一些简单的 jQuery 技巧来扩展 textarea 的功能。下面介绍几个常见的技巧。

自适应高度

要实现 textarea 的自适应高度，我们可以借助 jQuery 计算其内容的实际高度，然后动态调整 textarea 的高度。示例代码如下：

$(document).ready(function(){
  var $textarea = $('textarea');
  var lineHeight = parseInt($textarea.css('line-height'));
  var paddingTop = parseInt($textarea.css('padding-top'));
  var paddingBottom = parseInt($textarea.css('padding-bottom'));
  
  // 当输入内容发生变化时，计算实际高度并调整 textarea 高度
  $textarea.on('input', function(){
    var height = this.scrollHeight - paddingTop - paddingBottom;
    $(this).height(Math.max(height, lineHeight));
  }).trigger('input');
});

输入限制

要实现 textarea 的输入限制，我们可以借助 jQuery 监听其输入事件，然后根据需求阻止或处理输入。示例代码如下：

$(document).ready(function(){
  var $textarea = $('textarea');
  
  // 拦截 Enter 和空格键的输入
  $textarea.on('keypress', function(e){
    if (e.keyCode == 13 || e.keyCode == 32) {
      e.preventDefault();
    }
  });
  
  // 统计输入内容的字数，并限制在一定范围内
  $textarea.on('input', function(){
    var maxLength = 100;
    var length = $(this).val().length;
    if (length > maxLength) {
      $(this).val($(this).val().substr(0, maxLength));
      length = maxLength;
    }
    $('#counter').text(length + '/' + maxLength);
  }).trigger('input');
});

动态插入内容

要实现 textarea 的动态插入内容，我们可以借助 jQuery 获取其光标位置，然后在该位置插入指定字符串。示例代码如下：

$(document).ready(function(){
  var $textarea = $('textarea');
  
  // 在光标处插入指定字符串
  function insertAtCursor(text) {
    var startPos = $textarea[0].selectionStart;
    var endPos = $textarea[0].selectionEnd;
    $textarea.val($textarea.val().substring(0, startPos) + text + $textarea.val().substring(endPos, $textarea.val().length));
    $textarea[0].selectionStart = $textarea[0].selectionEnd = startPos + text.length;
    $textarea.trigger('input');
  }
  
  // 点击按钮时，在光标处插入指定字符串
  $('#insert-button').on('click', function(){
    insertAtCursor('Hello, world!');
  });
});

以上就是使用 jQuery 扩展 textarea 的介绍，希望对你有所帮助！