Удалить слово из текстового поля input по клику мыши

Question

Имеется форма отправки запроса:

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

Слова в поле input вводятся пользователем вручную и разделяются пробелами.

Вопрос: как (и возможно ли) с помощью JS/JQuery удалить любое слово из текстового поля по клику мыши на нем?

Например: текст в input - "шкаф купе бежевый". Пользователь кликает на слово "купе" и оно удаляется, остается в текстовом поле "шкаф бежевый".

Может быть следует использовать какие-то другие конструкции?

Answer 1

Проверяйте совместимость: 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>

Answer 2

Можете попробовать таким образом:

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">

Answer 3

RegExp для \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();
  ...

БЛОГ НА HUSL

Удалить слово из текстового поля input по клику мыши

Ответы (3 шт):