<textarea />光标处插入内容笔记

<textarea />
<div class="form-group">
  <label for="taSource">Source</label>
  <button type="button" id="btTagFrom" class="btn btn-info btn-xs" onclick="insertTag('f')">  [f:]  </button>
  <button type="button" id="btTagUrl" class="btn btn-info btn-xs" onclick="insertTag('u')">  [u:]  </button>
  <button type="button" id="btTagTitle" class="btn btn-info btn-xs" onclick="insertTag('t')">  [t:]  </button>
  <button type="button" id="btTagAuthor" class="btn btn-info btn-xs" onclick="insertTag('a')">  [a:]  </button>
  <button type="button" id="btTagDesc" class="btn btn-info btn-xs" onclick="insertTag('d')">  [d:]  </button>
  <textarea id="taSource" class="form-control" rows="2" style="resize: none"></textarea>
</div>
<script src="<%= request.getContextPath() %>/js/textarea-extra.js" type="text/javascript"></script>
<script type="text/javascript">
  function insertTag(tag) {
    // 取出已输入内容
    var source = $("#taSource").val();
    // 正则匹配避免重复添加
    var regStr = "\\[" + tag + ":.*?\\]";
    if ((new RegExp(regStr)).test(source) != true) {
      // 在光标处插入文字
      $("#taSource").insertContent("[" + tag + ":]");
    }
  }
</script>

textarea-extra.js

// 摘抄自:http://www.jb51.net/article/68490.htm
$(function() {
  /* 在textarea处插入文本--Start */
  (function($) {
    $.fn.extend({
      insertContent : function(myValue, t) {
        var $t = $(this)[0];
        if (document.selection) { // ie
          this.focus();
          var sel = document.selection.createRange();
          sel.text = myValue;
          this.focus();
          sel.moveStart('character', -l);
          var wee = sel.text.length;
          if (arguments.length == 2) {
            var l = $t.value.length;
            sel.moveEnd("character", wee + t);
            t <= 0 ? sel.moveStart("character", wee - 2 * t - myValue.length)
                : sel.moveStart("character", wee - t - myValue.length);
            sel.select();
          }
        } else if ($t.selectionStart || $t.selectionStart == '0') {
          var startPos = $t.selectionStart;
          var endPos = $t.selectionEnd;
          var scrollTop = $t.scrollTop;
          $t.value = $t.value.substring(0, startPos) + myValue
              + $t.value.substring(endPos, $t.value.length);
          this.focus();
          $t.selectionStart = startPos + myValue.length;
          $t.selectionEnd = startPos + myValue.length;
          $t.scrollTop = scrollTop;
          if (arguments.length == 2) {
            $t.setSelectionRange(startPos - t, $t.selectionEnd + t);
            this.focus();
          }
        } else {
          this.value += myValue;
          this.focus();
        }
      }
    })
  })(jQuery);
  /* 在textarea处插入文本--Ending */
});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 个人入门学习用笔记、不过多作为参考依据。如有错误欢迎斧正 目录 简书好像不支持锚点、复制搜索(反正也是写给我自己看...
    kirito_song阅读 2,500评论 1 37
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,806评论 1 92
  • document.write(''); } if ( (document.cookie && document.c...
    一副怂样阅读 731评论 0 1
  • 2017.02.06 版本 tabBar tabBar 是一个数组,只能配置最少2个、最多5个 tab,tab 按...
    Vincent_Du阅读 1,217评论 0 2
  • 【R:阅读原文】 一阶段 片段 一:选自《非暴力沟通》 非暴力沟通强调,感受的根源在于我们自身。我们的需要和期待,...
    雪妖妖2017阅读 118评论 3 0