Почему не работает установка input type = "number" для type = "text" в обработчике события mouseout? - PullRequest
Новая
       33

Почему не работает установка input type = "number" для type = "text" в обработчике события mouseout?

0 голосов
/ 14 февраля 2020

Цель:

У меня есть элемент ввода, в котором пользователь должен ввести число от 1 до 999, при желании можно использовать (тип ввода = "число") вверх / вниз спиннер, но когда мышь не находится над этим элементом или элемент не имеет фокуса, я хочу, чтобы элемент ввода имел тип «текст», чтобы гарантировать, что размер ввода будет отображать только значение элемента без счетчика показывая или пустую область скрытого счетчика. Таким образом, значение в элементе ввода и текст справа от элемента не перемещаются независимо от того, имеет ли элемент тип «текст» или «число», элемент имеет фокус или нет, или мышь находится над элементом. или нет.

Фон:

В настоящее время я изначально устанавливаю тип элемента ввода как «текст», поле слева - «2 канала», а ширина - '4ch', затем, когда мышь находится над элементом, я установил тип элемента на 'number', margin-left на '0' и width на '6ch'. Когда мышь удаляется от элемента или элемент теряет фокус, я возвращаю этим свойствам исходные значения.

Код: 

<style>
  /* Number text (1/3 etc) */
  .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: -90px; }
</style>
<div class="numbertext">
  <input type="text" style="text-align: right; margin-left: 2ch; width: 4ch;" min="1" max="999" value="1"
         onmouseover="setInputType( 'number' );"
         mouseout="setInputType( 'text' );"
         onblur="setInputType( 'text' );" />/
  <span>999</span>
</div>
<script>
  function setInputType( type ) {
    var input = window.event.currentTarget;

    if( type === 'text' ) {

      input.style.marginLeft = '2ch'; 
      input.style.width      = '4ch';

    }
    else {

      input.style.marginLeft = '0'; 
      input.style.width      = '6ch';

    }
    input.type = type;
  }
</script>

Проблема:

Когда страница первоначально отображается, код отображает нужный мне способ, наведите курсор на поле или сфокусируйтесь на нем. Однако перемещение мыши от поля после того, как мышь наведена на него, или поле теряет фокус, непоследовательно восстанавливает начальную настройку элемента ввода, поскольку обработчики событий mouseout и blur не всегда срабатывают. Я знаю это, потому что установка точки останова в ветке оператора if( type === 'text' ) функции setInputType и выполнение кода на исходной панели Chrome inspect> не останавливает выполнение кода, когда мышь отходит от элемента после перемещения мыши it.

Есть идеи, почему обработчики событий размытия и размытия не работают должным образом?

Решение:

This CodePage показывает полностью рабочее решение, которое включает исправление Брайана Эллиотта и предложение Джона П.

Спасибо

Ответы [ 2 ]

0 голосов
/ 14 февраля 2020

Используйте прослушиватели событий, чтобы ненавязчиво связывать события. Затем используйте event.type, чтобы определить, какое действие предпринять. 

//Get the relevent elements
let numText = document.querySelectorAll(".numbertext input[type='text']");

//Loop them
for (var i = 0; i < numText.length; i++) {
  //Now loop the event types we're interested in
  "blur focus mouseenter mouseleave".split(" ").forEach(function(e) {
      //and add the event listener for that event type
      numText[i].addEventListener(e, setInputType);
    })
  }

  //Event listener
  function setInputType(event) {
    var type = "text";
    //Dont change on mouse leave if the element has focus
    if(event.type == "blur" || (event.type == "mouseleave" && this != document.activeElement )) {
      
      this.style.marginLeft = '2ch';
      this.style.width = '4ch';
      type = "text";

    } else {

      this.style.marginLeft = '0';
      this.style.width = '6ch';
      type = "number";

    }
    this.type = type ;
  }
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  /*position: absolute;
  top: -90px;*/
}
<div class="numbertext">
  <input type="text" style="text-align: right; margin-left: 2ch; width: 4ch;" min="1" max="999" value="1" />/
  <span>999</span>
</div>

<div class="numbertext">
  <input type="text" style="text-align: right; margin-left: 2ch; width: 4ch;" min="1" max="999" value="1" />/
  <span>999</span>
</div>
0 голосов
/ 14 февраля 2020

На ваших элементах событий у вас есть mouseout="...", оно должно быть: onmouseout="..."

Как это: 

<input
    type="text"
    style="text-align: right; margin-left: 2ch; width: 4ch;"
    min="1" max="999"
    value="1"
    onmouseover="setInputType( 'number' );"
    onmouseout="setInputType( 'text' );"   //notice the onmouseout=""  instead of mouseout=""
    onblur="setInputType( 'text' );"
/>
...