Question

我有以下JavaScript，我试图将光标插入div中光标位置的位置。

var appendPlaceHolder = function (field) {
        var e = document.getElementById("t");
        e.innerHTML += (' <span class="nonEditable tags">{' + field + '} <span onclick=removePlaceholder(this) class="testing"></span>x</span> ');
    }

<div id="t" contenteditable="true">
  Hello
</div>

我该如何去做？

Answer 1

这是我写的一个旧剧本。希望它有所帮助。

大陆是鼠标输入div，tooltipOutput

function continentTooltip(continent, tooltipOutput) {
    var tooltip = $('.map__tooltip');

    $(continent).mouseenter(function() {

       $(document).off('mousemove').bind('mousemove', function(e){

          var positionX = (e.pageX + 20) + 'px';
          var positionY = e.pageY + 'px';

          $('.map__tooltip').css(      
             "transform" , 'translate(' + positionX + ', ' + positionY + ')'
          );
       });

       tooltip.addClass('map__tooltip--show');
       tooltip.text(tooltipOutput)
    })

    $(continent).mouseleave(function() {
        tooltip.removeClass('map__tooltip--show');         
    });
  }
  //call script
  continentTooltip(africa, 'Vacations in Africa');

HTML：

<div class="map__tooltip"></div>

CSS：

.map__tooltip {
     display: none;
     background-color: #FFF;
     border-radius: $radius;
     padding: 4px;
     position: absolute;
     top: 0;
     left: 0;
}

.map__tooltip--show {
    display: block;
}

@media screen and (max-width: 1300px) {

    .map__tooltip--show {
        display: none;
    }
}

在光标位置添加跨页到页面

1 个答案: