Safari проблемы с текстовыми входами, текст выбран пользователь вводит это вызывает текст, который будет потерян

Question

я следующий входной элемент на моей странице:

<input class="input" name="custom_fields[new]" placeholder="Enter placeholder" type="text"> 

У меня есть слушатель события Twitter Полета на этом элементе, который выглядит как это:

this.on('keyup', { 
    inputsSelector: this.updateViewInputs 
}); 

Что вызывает этот метод:

this.updateViewInputs = function(ev) { 
    var isDeletionKeycode = (ev.keyCode == 8 || ev.keyCode == 46); 
    // Remove field is user is trying to delete it 
    if (isDeletionKeycode && this.shouldDeleteInput(ev.target.value, this.select('inputsSelector').length)) { 
    $(ev.target.parentNode).remove(); 
    } 
    // Add another field dynamically 
    if (this.select('lastInputsSelector')[0] && (ev.target == this.select('lastInputSelector')[0]) && !isDeletionKeycode) { 
    this.select('inputsContainer').append(InputTemplate()); 
    } 
    // Render fields 
    that.trigger('uiUpdateInputs', { 
    inputs: that.collectInputs() 
    }); 
} 

И, наконец, запускает uiUpdateI nputs:

this.after('initialize', function() { 
    this.on(document, 'uiUpdateInputs', this.updateInputs) 
}); 

this.updateInputs = function(ev, data) { 
    // Render all inputs provided by user 
    this.select('inputListSelector').html(InputsTemplate({ inputs: data.inputs })); 
} 

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

Данная проблема возникает при использовании Safari, поскольку пользователь вводит текст в описанное поле ввода, текст в поле ввода становится подсвеченным (выбранным), и когда они вводят следующий символ, все содержимое заменяется этим единственным символом , Это приводит к тому, что пользователь не может ввести более 1 или 2 символов, прежде чем заменить их на следующий введенный символ.

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

• Использование SetTimeout отложить запуск кода на событие KeyUp
• Использование Selection попытаться отключить выбор текста с использованием collapseToEnd.
• Используя кнопки мыши, фокус, размытость события, чтобы попытаться снять выделение из введенного текста
• запуская Стрелка вправо событие, чтобы попытаться просто переместить курсор вперед, чтобы они пользователь не удаляет выделенный текст
• Использование setInterval для обычного удаления выбора, сделанного окном

Я очень смущен, почему это происходит, и мне интересно, является ли это ошибкой в ​​webkit с Flight. Я не вижу проблем с версиями Firefox или Chrome этой страницы. Спасибо за любую помощь!

Answer 1

Это, похоже, проблема с некоторыми версиями Safari. При прослушивании функции keyup в javascript он автоматически выберет весь текст в поле и впоследствии удалит все, когда набирается следующий ключ. Чтобы это не происходило, вызовите preventDefault для объекта события, который передается функции keyup.

this.on('keyup', function(e) { 
    e.preventDefault() 
});