0

Подскажите, пожалуйста, у меня есть функция которая берет смайл и вставляет его в textarea в то место где был расположен курсор. Проблема заключается в том что после применения первый смайл вставляется туда куда нужно, но последующее становиться в конец текста. Как можно зафиксировать положение курсора. Думаю что его можно сохранить но как сфокусировать опять после вставки на этом textarea В примере хочу вернуться на 4 позицию.

       const valueContent = textareaRef.current.value.split('');
        if (textareaRef.current.selectionEnd !== textareaRef.current.selectionStart) {
            valueContent.splice(textareaRef.current.selectionStart, textareaRef.current.selectionEnd, emojiObject.emoji);
            saveName(valueContent.join(''));
            setShowPicker(false);
            textareaRef.current.focus();
            return;
        }
        valueContent.splice(textareaRef.current.selectionStart, 0, emojiObject.emoji);
        saveName(valueContent.join(''));
        setShowPicker(false);
        textareaRef.current.focus();
        ///textareaRef.current.selectionEnd = 4;

Рабочая функция с учетом ответа от @bitvalser Принимаем эмоцию:

  • Так же работает выделение текста и замена его символом
    const onEmojiClick = React.useCallback((emojiObject) => {
        const valueContent = textareaRef.current.value.split('');
        const number = textareaRef.current.selectionStart;
        if (textareaRef.current.selectionEnd !== textareaRef.current.selectionStart) {
            valueContent.splice(textareaRef.current.selectionStart, textareaRef.current.selectionEnd, emojiObject.emoji);
            saveName(valueContent.join(''));
            setShowPicker(false);
            textareaRef.current.focus();
            return;
        }
        valueContent.splice(textareaRef.current.selectionStart, 0, emojiObject.emoji);
        saveName(valueContent.join(''));
        setShowPicker(false);
        textareaRef.current.focus();
        textareaRef.current.setRangeText(emojiObject.emoji, number, number);
        textareaRef.current.setSelectionRange(number + 2, number + 2);
    }, [showPicker]);

1 ответ 1

1

Не самое чистое решение, но можно попробовать самому ставить курсор

   const onAddEmoji = ({ emoji: native }) => {
    textArea.current.value = message;
    const startPos =
      textArea.current.selectionEnd === 0 ? textArea.current.value.length : textArea.current.selectionStart;
    const endPos = textArea.current.selectionEnd === 0 ? textArea.current.value.length : textArea.current.selectionEnd;
    textArea.current.focus();
    textArea.current.setRangeText(native, startPos, endPos);
    setMessage(textArea.current.value);
    textArea.current.setSelectionRange(startPos + 2, endPos + 2);
  };
1
  • Супер! Спасибо! все работает!...
    – Moroshka
    Commented 2 дек. 2022 в 13:37

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.