如何创建可生成、编辑并关闭的简易Bookmarklet文本框？

直接给你可用的Bookmarklet代码，将这段代码复制到书签的URL栏就能使用：

javascript:(function(){const e=document.createElement("div");e.style.cssText="position:fixed;top:20px;right:20px;width:300px;background:#fff;border:1px solid #ccc;border-radius:8px;padding:15px;box-shadow:0 2px 10px rgba(0,0,0,0.2);z-index:9999";const t=document.createElement("input");t.type="text";t.placeholder="输入内容...";t.style.cssText="width:100%;padding:8px;margin-bottom:10px;box-sizing:border-box;border:1px solid #ddd;border-radius:4px";const n=document.createElement("button");n.textContent="关闭";n.style.cssText="padding:8px 16px;background:#f44336;color:#fff;border:none;border-radius:4px;cursor:pointer";n.onclick=()=>document.body.removeChild(e);e.appendChild(t),e.appendChild(n),document.body.appendChild(e)})();

功能说明 #

• 点击书签后，页面右上角会弹出带输入框的小型面板
• 输入框支持输入任意文本内容
• 点击「关闭」按钮可直接移除面板，不会影响原页面

自定义修改参考（可选） #

如果需要调整样式或功能，可以用未压缩的原始代码修改：

javascript:(function() {
  // 创建面板容器
  const panel = document.createElement("div");
  panel.style.cssText = `
    position: fixed;
    top: 20px;
    right: 20px;
    width: 300px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 9999;
  `;

  // 创建输入框
  const input = document.createElement("input");
  input.type = "text";
  input.placeholder = "输入内容...";
  input.style.cssText = `
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 4px;
  `;

  // 创建关闭按钮
  const closeBtn = document.createElement("button");
  closeBtn.textContent = "关闭";
  closeBtn.style.cssText = `
    padding: 8px 16px;
    background: #f44336;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  `;
  closeBtn.onclick = () => document.body.removeChild(panel);

  // 组装元素并添加到页面
  panel.appendChild(input);
  panel.appendChild(closeBtn);
  document.body.appendChild(panel);
})();

你可以按需修改面板的位置、大小、颜色，或者给输入框添加回车提交等额外逻辑。

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