主页 / 问题 / 1411122
Accepted
Ruport
Asked:2022-07-18 16:23:25 +0000 UTC2022-07-18 16:23:25 +0000 UTC

单击鼠标时从输入文本字段中删除单词

  • 772

有一个申请表：

<form name="search" action="/search" method="POST">
<input type="text" id="searchText" name="searchText">
<button id="submit" type="submit"></button>
</form>

输入字段中的单词由用户手动输入，并以空格分隔。

问题：如何（并且可能）使用 JS / JQuery 在鼠标单击时从文本字段中删除任何单词？

例如：输入中的文字是“米色衣柜”。用户点击单词“compartment”并将其移除，保留在文本框“closet beige”中。

也许应该使用其他一些构造？

javascript jquery

3 个回答

  1. 你可以这样试试：

    const input = document.querySelector('#t1');

input.addEventListener('click', e => {
  const target = e.target;
  const clickPosition = target.selectionStart;
  const value = target.value;
  const splitSymbol = ' ';
  let wordStartPosirion = 0;
  let wordEndPosition = value.length;


  for (let i = clickPosition; i >= 0; --i) {
    if (i === 0) {
      wordStartPosirion = 0;
      break;
    } else if (value[i] === splitSymbol) {
      wordStartPosirion = i + 1;
      break;
    }
  }

  for (let i = clickPosition; i < value.length; ++i) {
    if (i === value.length - 1) {
      wordEndPosition = value.length;
      break;
    } else if (value[i] === splitSymbol) {
      wordEndPosition = i;
      break;
    }
  }
  
  const word = value.slice(wordStartPosirion, wordEndPosition);
  
  e.target.value = value.replaceAll(word, (matchedWord, i) => {
    if (i === wordStartPosirion) return '';
    
    return matchedWord;
  });
});
    <input type="text" id="t1" value="abcd sdsds abcd">

    • 2

  2. 检查兼容性：selectionStart.

    var searchText;

window.onload = init;

function init() {
    searchText = document.getElementById("searchText");
    searchText.onpointerup = function() {
        let text = searchText.value;
        let cursorPos = searchText.selectionStart;
        searchText.value = cutString(text, cursorPos, " ");
    }
}

function cutString(string, position, delimiter) {
    if (position == string.length) return string;
    let hasNext = true, hasPrev = true;
    let prevSpacePos = string.lastIndexOf(delimiter, position);
    if (prevSpacePos == -1) {
        hasPrev = false;
        prevSpacePos = 0;
    }
    let nextSpacePos = string.indexOf(delimiter, position);
    if (nextSpacePos == -1) {
        hasNext = false;
        nextSpacePos = string.length;
    }
    return string.slice(0, hasNext? hasPrev? prevSpacePos+1 : prevSpacePos : prevSpacePos) + string.slice(hasNext? nextSpacePos+1 : nextSpacePos);
}
    <form name="search" action="/search" method="POST">
    <input type="text" id="searchText" name="searchText">
    <button id="submit" type="submit">Субмит</button>
</form>

    • 1
  3. Best Answer

    RegExp for\S+将为我们提供单词和索引：

    searchText.onclick = (e) => {
  let input = e.target;
  let pos   = input.selectionStart;
  let words = Array.from(input.value.matchAll(/\S+/g));

  let index = words.findIndex(v => pos > v.index && pos < v.index + v[0].length);

  if (index > -1) {
    let start = words[index].index;
    let count = words[index][0].length;

    let letters = [...input.value];
    letters.splice(start, count + 1);

    input.value = letters.join('').trimRight();
  }
};
    <form name="search" action="/search" method="POST">
  <input type="text" id="searchText" name="searchText" value="hello crazy man crazy hello">
  <button id="submit" type="submit">Submit</button>
</form>

    添加
    要使其在双击时工作：

    searchText.ondblclick = (e) => {
  ...

    通过按右键：

    searchText.oncontextmenu = (e) => {
  event.preventDefault();
  ...
    • 1

相关问题