如何在页面就绪时隐藏动态创建的div，仅选中文本时显示？

问题的核心是你在页面加载时创建的#rplceTxtDiv默认处于显示状态，所以页面一加载就会看到空的div。我们只需要让它默认隐藏，再配合选中事件精准控制显示/隐藏，同时补充一些边界场景的处理即可。

具体修改方案 #

1. 创建div时直接设置默认隐藏：通过CSS或JS让div初始就不可见
2. 优化选中事件的判断逻辑：只有当文本框内真正选中了内容（选中起始位置≠结束位置）时才显示div
3. 添加全局点击隐藏逻辑：点击页面非目标区域时自动隐藏div，避免它一直停留在页面上

修正后的完整代码 #

$(document).ready(function () { 
    closePopUp(); 

    var replaceDiv = document.createElement('div');
    replaceDiv.id = 'rplceTxtDiv';
    // 创建时直接设置默认隐藏
    replaceDiv.style.display = 'none'; 
    document.getElementsByTagName('body')[0].appendChild(replaceDiv);

    var innerspan = document.createElement('span');
    replaceDiv.appendChild(innerspan);
    innerspan.innerHTML += '˟';

    var innerDiv = document.createElement('div');
    replaceDiv.appendChild(innerDiv);

    innerspan.addEventListener("click", closePopUp, false);
    replaceDiv.addEventListener("click", getSel, false);

    var rplceTxtDiv = $('#rplceTxtDiv');

    $('#mytextarea').on('select', function (e) { 
        var txtarea = document.getElementById("mytextarea");
        var start = txtarea.selectionStart;
        var finish = txtarea.selectionEnd;

        // 只有选中有效内容时才显示div
        if (start !== finish) {
            rplceTxtDiv.offset(getCursorXY(txtarea, start, 20)).show();
            rplceTxtDiv.find('div').text('replace with stars');
        } else {
            rplceTxtDiv.hide();
        }
    }).on('input', function () { 
        if (interval) { 
            interval = false; 
            edits.push($(this).val()); 
            if (edits.length > maxHistorySize) edits.shift(); 
            setTimeout(() => interval = true, saveInterval); 
        } 
    });

    // 点击页面其他区域时隐藏操作div
    $(document).on('click', function(e) {
        const target = $(e.target);
        // 点击目标不是div本身，也不是文本框时隐藏
        if (!target.closest('#rplceTxtDiv').length && !target.closest('#mytextarea').length) {
            rplceTxtDiv.hide();
        }
    });

    document.onkeydown = undo; 
});

关键修改点说明 #

• 默认隐藏div：通过replaceDiv.style.display = 'none'在创建阶段就设置隐藏，彻底避免页面加载时出现空div。你也可以用CSS方式实现，在样式表中添加：

  #rplceTxtDiv {
      display: none;
  }
  

  两种方式效果一致，选你习惯的即可。

• 选中有效性判断：加入start !== finish的条件，确保只有用户真正选中了文本内容时才显示操作div，避免点击文本框但未选中内容时误显示。

• 全局点击隐藏：监听document的点击事件，判断点击区域是否属于操作div或文本框，不属于则隐藏div，让交互逻辑更符合用户预期。

内容的提问来源于stack exchange，提问作者anub