针对已编辑的文本显示Pop

小提琴: https://jsfiddle.net/kidsdial1/na7w83dc/1/ 解决方案无需执行任何操作，只需在代码上添加timeInterval，以便在更改文本时始终进行检查删除此代码document.getElementById(lightId).style.left = layer.x + document.getElementById(layer.name).offsetWidth + 9 + 'px'并添加此代码setInterval(function() { document.getElementById(lightId).style.left = layer.x + document.getElementById(layer.name).offsetWidth + 9 + 'px'}, 100);您的问题已解决，现在您的方框分别遵循您的代码Onclick Text, we are displaying Pop Up after the last word in a Text....We are using this logic : left = layer.width + layer.xCode :document.getElementById(lightId).style.left = layer.x + document.getElementById(layer.name).offsetWidth + 9 + 'px'User can edit the text from their side....Issue : Once user edit text , Pop up is fixed in same place as in Link1....Requirement :Pop up should display after the last word of edited text as Link2....var target;var imageUrl = "https://i.imgur.com/RzEm1WK.png";// json filelet jsonData = { "layers": [{ "x": 0, "height": 450, "layers": [{ "x": 0, "layers": [{ "x": 57, "y": 33, "src": "2ccd95bae3f2a0c8249205ca5dfbed24_Montserrat-Bold.ttf", "type": "text", "size": 67, "text": "First Line", "name": "edit_good" }, { "x": 121, "y": 99, "src": "180ef82d12e3eee668a3f6b51ea444e9_Font972.otf", "type": "text", "size": 67, "text": "Second line", "name": "edit_good_1" } ], }, ], "width": 500, "name": "L1" }]};$(document).ready(function() { // get the text from json - ignore it function getAllSrc(layers) { let arr = []; layers.forEach(layer => { if (layer.src) { arr.push({ src: layer.src, x: layer.x, y: layer.y, name: layer.name }); } else if (layer.layers) { let newArr = getAllSrc(layer.layers); if (newArr.length > 0) { newArr.forEach(({ src, x, y, name }) => { arr.push({ src, x: (layer.x + x), y: (layer.y + y), name: (name) }); }); } } }); return arr; } function json(data) { var width = 0; var height = 0; let arr = getAllSrc(data.layers); let layer1 = data.layers; width = layer1[0].width; height = layer1[0].height; let counter = 0; let table = []; for (let { src, x, y, name } of arr) { $(".container").css('width', width + "px").css('height', height + "px").addClass('temp'); if (name.indexOf('mask_') !== -1) { var imageUrl1 = imageUrl; } else { var imageUrl1 = ''; } var mask = $(".container").mask({ imageUrl: imageUrl1, maskImageUrl: 'http://piccellsapp.com:1337/parse/files/PfAppId/' + src, onMaskImageCreate: function(img) { img.css({ "position": "absolute", "left": x + "px", "top": y + "px" }); }, id: counter }); table.push(mask); fileup.onchange = function() { let mask2 = table[target]; mask2.loadImage(URL.createObjectURL(fileup.files[0])); document.getElementById('fileup').value = ""; }; counter++; // get the text end } drawText(data); } json(jsonData);}); // end of document readyconst fonts = []; // caching duplicate fontsfunction drawText(layer) { if (layer.type === 'image') return; if (!layer.type || layer.type === 'group') { return layer.layers.forEach(drawText) } if (layer.type === 'text') { const url = 'http://piccellsapp.com:1337/parse/files/PfAppId/' + layer.src; if (!fonts.includes(url)) { fonts.push(url); $("style").prepend("@font-face {\n" + "\tfont-family: \"" + layer.font + "\";\n" + "\tsrc: url(" + url + ") format('truetype');\n" + "}"); } // Below is POP UP Code const lightId = 'light' + layer.name const lightIdString = '#' + lightId// Fetch the text and display in page $('.container').append( '<a id ="' + layer.name + '" onclick="document.getElementById(\'' + lightId + '\').style.display=\'block\';document.querySelector(\'.white_content:not(' + lightIdString + ')\').style.display=\'none\';" ' + '<div class="textcontainer" contenteditable="true" ' + 'style="' + 'left: ' + layer.x + 'px; ' + 'top: ' + layer.y + 'px; ' + 'font-size: ' + layer.size + 'px; ' + '">' + layer.text + '</div></a>' + '<div id="light' + layer.name + '" class="white_content" style="' + 'left: ' + layer.x + 'px; ' + 'top: ' + layer.y + 'px; ' + '"> content <a href="javascript:void(0)" onclick="document.getElementById(\'light' + layer.name + '\').style.display=\'none\';">Close</a></div> <div>' );// pop up left position : document.getElementById(lightId).style.left = layer.x + document.getElementById(layer.name).offsetWidth + 9 + 'px' }}// extempl code end// ignore below code(function($) { var JQmasks = []; $.fn.mask = function(options) { // This is the easiest way to have default options. var settings = $.extend({ // These are the defaults. maskImageUrl: undefined, imageUrl: undefined, scale: 1, id: new Date().getUTCMilliseconds().toString(), x: 0, // image start position y: 0, // image start position onMaskImageCreate: function(div) {}, }, options); var container = $(this); let prevX = 0, prevY = 0, draggable = false, img, canvas, context, image, timeout, initImage = false, startX = settings.x, startY = settings.y, div; container.updateStyle = function() { return new Promise((resolve, reject) => { context.beginPath(); context.globalCompositeOperation = "source-over"; image.onload = function() { canvas.width = image.width; canvas.height = image.height; context.drawImage(image, 0, 0, image.width, image.height); div.css({ "width": image.width, "height": image.height }); resolve(); }; }); }; };}(jQuery));.container { background: gold; position: relative;}.white_content { display: none; position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; padding: 16px; border: 16px solid orange; background-color: white; z-index: 1002; overflow: auto;}.masked-img { overflow: hidden; position: relative;}.textcontainer { position: absolute; text-align: center; color: #FFF}.textcontainer:hover { background: red; padding: 1px; border-style: dotted;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input id="fileup" name="fileup" type="file" style="display:none"><div class="container"></div>Pen : https://codepen.io/kidsdial/pen/wZjqyvFiddle : https://jsfiddle.net/kidsdial1/na7w83dc/1/ 解决方案 Nothing to do, simply add timeInterval on your code, so it check always when you change textRemove this codedocument.getElementById(lightId).style.left = layer.x + document.getElementById(layer.name).offsetWidth + 9 + 'px'and add this codesetInterval(function() { document.getElementById(lightId).style.left = layer.x + document.getElementById(layer.name).offsetWidth + 9 + 'px'}, 100);your problem solved, now your box respectively follow your code 这篇关于针对已编辑的文本显示Pop的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！