Выделите и скопируйте числа без разделителей

#javascript #html #css #reactjs

#javascript #HTML #css #reactjs

Вопрос:

В настоящее время я создаю компонент react, в котором я работаю с числами. Для чисел есть тег ввода, он форматирует число при вводе.

Если я введу 50000,50, он автоматически отформатирует его до 50,000.50

Теперь я хочу выделить это число с помощью мыши и скопировать его. После вставки его в какое-либо другое место он должен вставить его неформатированным способом, например: 50000.50 (копирование фактического числа без разделителей)

Я где-то видел, что при выборе чисел разделители не выделяются. Я хочу что-то подобное. Но изо всех сил пытаюсь его найти.

Пожалуйста, помогите мне!!!

1. Вы можете удалить форматирование в событии onselect (срабатывает, когда пользователь выбирает текст) и повторно добавить его onblur (срабатывает, когда пользователь отменяет выбор)

Ответ №1:

Используйте CSS, выбираемый пользователем.

Свойство CSS, выбираемое пользователем, определяет, может ли пользователь выделять текст.

 <div>50<span style="user-select: none">,</span>000.50</div>

1. Это супер круто 🙂 Но что, если есть поле ввода, которое форматирует число при вводе, и мы хотим выбрать из него число. Я думаю, что отредактирую свой вопрос.

2. @Ragu Затем вам нужно изменить ‘value’ входных данных в ‘focus’ и изменить его обратно на форматированное значение в ‘blur’. Другого способа, afaik, нет. Приветствия

Ответ №2:

Переполнение стека отключило возможность копирования здесь, но это должно сработать. Если вы получаете входные данные из какого-либо источника, вы можете задать одно значение для копирования и отобразить его в другом формате.

 function commafy(number) {
    return number.toString().replace(/B(?=(d{3}) (?!d))/g, ",");
}
const MyComponent = () => {
  // Assume this data is coming from props or an API call
  const data = {name: 'Test', price: '50000'}
  const [copySuccess, setCopySuccess] = React.useState('');
  
  const copyToClipBoard = copyMe => {
    try {
      navigator.clipboard.writeText(copyMe);
      setCopySuccess('Price copied');
    } catch (e) {
      setCopySuccess('Failed to copy');
    }
  };

  return (
   <div>
     <div>Name: {data.name}</div>
     <div>Price: {commafy(parseFloat(data.price).toFixed(2))}</div>
     <button onClick={() => copyToClipBoard(data.price)}>
       Copy
     </button>
     <div>{copySuccess}</div>
   </div>
  )
}

ReactDOM.render(<MyComponent/>, document.getElementById('root'))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>