Блог

Проблема:

Я создаю пользовательский дисплей клавиатуры на веб-сайте, потому что хотел добавить к нему определенные ключевые функции. В настоящее время в моей пользовательской клавиатуре есть ошибка, когда, если у меня есть кнопки x , а y затем я быстро нажимаю x -> y кнопку «От», это вызывает y событие «щелчок» для вызова same event as previous onClick , которое в данном случае x , а также наоборот.

Эта проблема, по-видимому, возникает только на мобильных устройствах ios. до сих пор я тестировал его только на iPhone 8 и iPhone 12 Pro Max safari browsers , но подозреваю, что это связано с iOS.

Цель:

Я хочу предотвратить возникновение этой проблемы и по-прежнему иметь возможность быстро печатать с помощью моей пользовательской клавиатуры. Как я могу это исправить?

Попытки:

Я попробовал несколько разных подходов, но ни один из них не сработал:

• разделение функций для обеих кнопок
• добавление клавиш в кнопки
• отключение ранее нажатой кнопки на 100 мс-400 мс

Пример Кода:

 import React, {useState} from 'react';

const spacingStyle = {
  fontSize: '14px',
  marginBottom: '10px',
}

const buttonStyle = {
  background: 'gray',
  color: 'White',
  marginRight: '5px',
  padding: '0 10px',
}

const Test = () => {
  const [content, setContent] = useState('');
  const [clicked, setClicked] = useState('');

  const appendToText = (e, char) => {
    setContent(content   char);
    setClicked(e.target.innerText);
  };

  return (
    <>
      <p style={spacingStyle}>Content: {content}</p>
      <p style={spacingStyle}>Clicked: {clicked}</p>
      <button key="key-x" style={buttonStyle} onClick={(e) => appendToText(e, 'x')}>X</button>
      <button key="key-y" style={buttonStyle} onClick={(e) => appendToText(e, 'y')}>Y</button>
    </>
  );
};

export default Test;
 

Пример изображения здесь