Реагируйте: Если курсор находится в середине существующего текста, переместите его в конец и нажмите клавишу возврата, чтобы удалить - PullRequest
Новая
       30

Реагируйте: Если курсор находится в середине существующего текста, переместите его в конец и нажмите клавишу возврата, чтобы удалить

0 голосов
/ 11 октября 2019

Фон: 

date format in text box
02/12/1999

potential cursor positions in text-box
(c)0(c)2/12/1999(c) .... (c)

Требуемое поведение. 

* cursor in middle of input
0(c)2/12/1999

* press backspace

* cursor moves to the end
02/12/1999(c)

* press backspace again
02/12/1999(c)

* real delete
02/12/199

При наведении курсора на начало или конец вводимого текста сохраняйте поведение по умолчанию для ввода текстового поля.

Код, который у меня есть, в приложении create response 

import React, {useState, useRef} from "react";

function App() {
  const prevDateFromRef = useRef('');
  const inputRef = useRef(null);
  const [fromDate, setFromDate] = useState('');

  const checkDateValue = (str, max) => {
    if (str.charAt(0) !== '0' || str === '00') {
      let num = parseInt(str);

      if (isNaN(num) || num <= 0 || num > max) num = 1;

      str =
        num > parseInt(max.toString().charAt(0)) && num.toString().length === 1
          ? '0' + num // self, no more #
          : num.toString(); // can be more num
    }
    return str;
  };

  // user input
  const formatInputDate = (input) => {
    if (
      prevDateFromRef.current.length > input.length &&
      /\d\/$/.test(prevDateFromRef.current)
    ) {
      input = input.substr(0, input.length - 1);
    }


    let values = input.split('/').map(value => {
      return value.replace(/\D/g, '');
    });

    // day
    if (values[0]) values[0] = checkDateValue(values[0], 31);

    // month
    if (values[1]) values[1] = checkDateValue(values[1], 12);

    let output = values.map((value, index) => {
      return value.length === 2 && index < 2 ? value + '/' : value;
    });

    let assignVal = output.join('').substr(0, 10);
    prevDateFromRef.current = assignVal;

    return assignVal;
  }

  return <div className="App">
    <input
      ref={inputRef}
      // id
      id="fromDate"
      // guide
      placeholder={'DD/MM/YYYY'}

      onKeyDown={(e) => {

        // detect the del key
        if (e.keyCode === 8) {
          console.log('-- delete --');
          if(e.target.selectionStart !== 0 || e.target.selectionStart !== e.target.value.length) {
            // del in mid
            console.log('@@@ del in mid');
            // move cursor at the end and allow user deletes there, not delete in the middle
            inputRef.current.setSelectionRange(e.target.value.length, e.target.value.length);
            //e.preventDefault();
          }
        }
      }}

      // on change
      onChange={event => {
        //test
        console.log('==== on change + del as well === ');
        let outputDate = formatInputDate(event.target.value);

        // set from date val
        setFromDate(outputDate);
      }}
      value={fromDate}

    />
  </div>;
}

export default App;

проблема с моим кодом заключается в том, что если del в середине, он перемещается в конец, а затем удаляется прямо. Я хочу, чтобы del pauses и позволял пользователю del с самого конца.

fullcode: https://github.com/kenpeter/auto-date-react

У меня проблема с этим, поэтому я попробовал описанное выше для обхода. Заполнитель, который исчезает символ за символом, вместо него используйте ввод

...