Javascript klar Eingabefeld auf Fokus von einem Eingabefeld auf den anderen beweglichen

Question

Ich habe den folgenden Code auf einer Eingangsnummer Feld:

<input class="quantity_container" v-model="length.quantity" 
    type="number" pattern="[0-9]*" inputmode="numeric" 
    onfocus="if (this.value == '0') this.value = '';"/> 

Der Code das Feld löschen funktioniert, wenn kein anderes Eingabefeld im Fokus war bevor ich zu dem neuen Eingabefeld wechselte, das eine '0' enthält. Die Seite hat viele Eingabefelder und ich kann leider nicht namentlich darauf zugreifen. Ich habe überprüft und der Onfocus wird aufgerufen, aber das Feld wird nie gelöscht, wenn es '0' ist und den Fokus von einem Eingabefeld zum anderen verschiebt.

Es wird nur gelöscht, wenn ich wegtippe und den Fokus auf das letzte Eingabefeld lösche und dann den Fokus auf den neuen nehme.

Jede Hilfe sehr geschätzt.

Answer 1

Verwenden Sie onblur, um das Feld zu löschen. Das Blur-Ereignis tritt auf, wenn das Feld den Fokus verliert. in Ihrem Fall wird es sein,

<input class="quantity_container" v-model="length.quantity" 
    type="number" pattern="[0-9]*" inputmode="numeric" 
    onblur="if (this.value == '0') this.value = '';"/> 

wenn Ihre Eingabefelder 0 Wert zum Zeitpunkt der Ladung der Seite hat, können Sie sie als

$(document).ready(function() { 
$('input[value="0"]').val(''); 
}); 

Answer 2

Ich würde implementieren diese durch die Schaffung eines custom input component löschen. Zum Beispiel

Vue.component('quantity-input', { 
    template: '<input type="number" class="quantity_container" inputmode="numeric" ref="input" :value="value" @input="updateValue($event.target.value)" />', 
    props: ['value'], 
    methods: { 
    updateValue: function(value) { 
     var formattedValue = value == 0 ? '' : value 
     if (formattedValue !== value) { 
     this.$refs.input.value = formattedValue 
     } 
     this.$emit('input', formattedValue) 
    } 
    } 
}) 

können Sie dann einfach verwenden

<quantity-input v-model="length.quantity"></quantity-input>