[英]Add span to page at the cursor position
我有以下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>
我該怎么做呢?
這是我寫的一個舊腳本,希望能有所幫助。
大陸是鼠標輸入的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;
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.