Количества опустел после события тайма-аута

Question

У меня есть числовое поле ввода, я хотел бы, чтобы автоматически удалить не числовые символы из:

<input type="number" name="bookISBN" id="bookISBN"> 

Я использую следующие JQuery, который работает для text полого вводом, но когда что-то наклеено в поле number оно опустошает поле.

$('input').on('paste', function() { 
 
     var $el = $(this); 
 
     setTimeout(function() { 
 
     $el.val(function(i, val) { 
 
      return val.replace(/\D/g, ''); 
 
     }) 
 

 
     }) 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
Paste this: 978-1-58542-881-6 
 
<br />Number: 
 
<input type="number" name="bookISBN" id="bookISBN"> 
 
<br />Text: 
 
<input type="text" name="text" id="text">

При вставке ISBN в текстовое поле он держит только цифры, но когда вы вставляете то же самое в поле номера он опустошает.

Есть ли какой-либо путь вокруг этого, кроме изменения номера поля в текст?

Answer 1

Вы можете использовать clipboardData при прослушивании при вставке.

Для того, чтобы сохранить совместимость с IE вы должны проверить, если clipboardData крепится к окну или к событию:

$('input').on('paste', function(e) { 
 
    e.preventDefault(); 
 
    var txt = ''; 
 
    if (window.clipboardData !== undefined) { 
 
    txt = window.clipboardData.getData('text').replace(/\D/g, ''); 
 
    } else { 
 
    txt = e.originalEvent.clipboardData.getData('text').replace(/\D/g, ''); 
 
    } 
 
    if (!isNaN(txt) && txt.trim().length != 0) 
 
    this.value = txt; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
Paste this: 978-1-58542-881-6 
 
<br />Number: 
 
<input type="number" name="bookISBN" id="bookISBN"> 
 
<br />Text: 
 
<input type="text" name="text" id="text">