Question

我已经为我的项目编写了一个脚本。我得到了输出但不是我预期的。

在输入中，第一行的元素输出正常。但对于textarea输出不好。我不能在'@'之后定位我的div。我只是在'@'之后追加我的div，但它会随机移动。

我只想将我的div添加到'@'下。我只是希望我的输出像facebook提到的那样。任何人都可以帮助我解决这个问题或帮助我使用脚本吗？

HTML

<!DOCTYPE html>
<head>
  <title>Caret</title>
  <link rel="stylesheet" href="style.css"/>
</head>
<body>
  <div class="sBParent">
    <textarea type="" name="" id="abc" rows="3" class="searchBox"></textarea>
  </div>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="jcret.js"></script>
  <script type="text/javascript" src="script.js"></script>
</body>

的style.css

.sBParent{
    width: 200px;
}
.searchBox{
    width: 100%;
    /*word-break: break-all;*/
}

.sugBox{
    width: 100%;
    max-width: 190px;
    position: relative;
    top: 0;
    padding: 2px 4px;
    border: 1px solid #ededed;
    box-shadow: 0 0 1px 1px #999;
    margin-top: -5px;
    background: #fff;
}
.singleSug{
    height: 25px;
    width: 100%;
    padding-top: 7px;
    padding-left: 5px;
}
.singleSug.active{
    background: #444;
    color: #ededed;
}

的script.js

$(document).ready(function() {
  var targetSBox, sKeyLen, tRep;
  var caret_position, string_before_cursor, last_word;

  function makesuggessionbox(targets) {
    if (targets.length > 0) {
      $(targetSBox).parent().find('.sugBox').remove();
      var html = '<div class="sugBox">';

      for (var i = 0; i < targets.length; i++) {
        var result = targets[i];
        if (i == 0) {
          html = html + '<div class="singleSug active">' + result + '</div>';
        } else {
          html = html + '<div class="singleSug">' + result + '</div>';
        }
        if (i == 4) {
          break;
        }
      }
      html = html + '</div>';
      // alert(html);
      $(targetSBox).parent().append(html);
      var p = $(targetSBox);
      var position = p.position();
      var tHeight = p.height();
      var tWidth = p.innerWidth();
      var charWidth = 6;
      var charHeight = 15;
      var pTop = (position.top + charHeight + 12);
      var pLeft = (position.left + (charWidth * caret_position));
      if (pLeft > tWidth) {
        var count = Math.round(pLeft / tWidth);
        var extra = pLeft - (count * tWidth);
        if (extra < 0) {
          var ex2 = count - (pLeft / tWidth);
          extra = pLeft - ((count - 1 - ex2) * tWidth);
        }
        pTop = pTop + (charHeight * count);
        pLeft = extra;
      }
      $(targetSBox).parent().find('.sugBox').css({
        'position': 'absolute',
        'top': pTop + 'px',
        'left': pLeft + 'px'
      });
    }
  }

  $(document).on('mouseenter', '.singleSug', function() {
    $(this).parent().find('div.singleSug.active').removeClass('active');
    $(this).addClass('active');
  });

  $(document).on('click', '.singleSug', function() {
    $(targetSBox).val($(targetSBox).val().replace(tRep, $(this).text()));
    $(targetSBox).parent().find('.sugBox').remove();
  });

  $('textarea , input').on('keyup', function() {
    targetSBox = "#" + $(this).attr('id');
    caret_position = $(this).caret();
    console.log(caret_position);
    string_before_cursor = $(this).val().substring(0, caret_position);
    last_word = string_before_cursor.split(' ').pop();
    if (last_word.charAt(0) == '@' || last_word.charAt(0) == '#') {
      var target_string = last_word.substring(1);

      tRep = last_word;
      console.log('found: ' + target_string);
      $.ajax({
        url: "search.php",
        method: "post",
        data: {
          textarea: target_string
        },
        dataType: "JSON",
        success: function(response) {
          makesuggessionbox(response);

        }
      });

    } else {
      console.log('---');
      $(targetSBox).parent().find('.sugBox').remove();
    }

  });

});

用于提及或标记人员但无法正常工作的脚本

0 个答案: