主页 / 问题 / 958517
Accepted
Komdosh
Asked:2020-03-19 20:26:42 +0000 UTC2020-03-19 20:26:42 +0000 UTC

请求更正文本中的错误

  • 772

需要找到现成的服务。实现可以是 for Angular( TypeScript) 或常规JS模块。

任务：有必要从用户那里获得反馈，要求更正网站上的文本。为了简化用户和开发人员之间的交互，需要一种机制来突出显示文本并提出修复建议。

算法：

  1. 选择有错误的文本
  2. 按下热键（CTRL\SHIFT\ALT + 任何东西）
  3. 出现一个带有文本字段的窗口，用户在其中输入文本的更正版本
  4. 数据被发送到管理员可以查看请求的服务器

找到了这样的示例（1和2），但它们没有热键调用，也没有文本，而是选择了 HTML 元素。需要类似的东西。

javascript

1 个回答

  1. Best Answer

    大致是这样的？:)

    更新：焊接的jsonstore.io，保存的数据可以看这里

    window.addEventListener('keydown', (e) => {
  if (!e.ctrlKey || e.code !== "Enter")
    return;
  let form = document.querySelector('div.form');
  form = form || document.createElement('div');
  form.classList.add('form');
  form.innerHTML = `
    <textarea>${getSelectionText()}</textarea>
    <button onclick="submit()">send</button>
  `;
  document.body.append(form)
})

function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    return text;
}

function submit() {
  let form = document.querySelector('div.form');
  post(form.querySelector('textarea').textContent);
  form.remove();
}

function rnd(i) {    
    var rnd = '';
    while (rnd.length < i) {
        rnd += Math.random().toString(36).substring(2);
    }
    return rnd.substring(0, i);
};

function post(text) {
  let jsonstore = 'https://www.jsonstore.io/36714770fba88322c1ab00e45dd7b38f46a873180320ad3ac5850a82a4d8118d/';
  
    let key = rnd(55);
    fetch(jsonstore + 'record/'+key, {
      headers: {
        'Content-type': 'application/json'
      },
      method: 'POST',
      body: JSON.stringify({ text: 'text'}),
    });
 
}
    .form {
  border: 1px solid black;
  position: absolute;
  width:200px;
  height:150px;
  top:50vh;
  left:50vw;
  transform: translate(-50%,-50%);
  padding: 4px;
}

textarea {
  width: 190px;
  height: 100px;
}
    Выделить текст здесь и нажать ctrl+enter

    • 1

相关问题