Así que tengo el siguiente formulario:

 <FormulateForm @submit="onSubmit"> <FormulateInput type="text" label="Total Time" name="totalTime" validation="^required" @keydown="isNumber" v-on:blur="formatDigits($event,'totalTime')" /> <FormulateInput type="text" name="restingDuration" label="Resting Duration" validation="^required" @keydown="isNumber" v-on:blur="formatDigits($event, 'restingDuration')" /> </FormulateForm>

la función de formato de dígitos simplemente formatea la entrada del número como 212 -> 2:12. El evento de desenfoque funciona bien, sin embargo, el evento de desenfoque y de teclado está ocurriendo en cada campo de entrada y deshace el formato del campo de entrada anterior cuando modifico el segundo. ¿Hay alguna manera de vincular el evento y desenfocar el evento a un campo específico en lugar de que se active con cada pulsación de tecla?

Aquí está la función de formato:

 formatDigits(event, name) { const inputVal = event.target.value; let final; if (event.target.name === name) { if (inputVal?.length > 0 && inputVal?.length <= 2) { let minutes = this.clamp(inputVal.slice(0), 0, 59); final = '0000:' + minutes; } else if (inputVal?.length > 2 && inputVal?.length <= 6) { const secondsIndex = inputVal.length - 2; const hours = this.clamp( inputVal.slice(0, secondsIndex), 0, 9999, true, 4, ); const minutes = this.clamp( inputVal.slice(secondsIndex, inputVal.length), 0, 59, ); final = hours + ':' + minutes; } else { //invalid length return; } event.target.value = final; } },

Aquí está la función de abrazadera:

 clamp(val, min, max, isHours, lengthMax) { const ret = val > max ? max : val < min ? min : val; if (isHours) { if (ret.length < lengthMax) { const zeroes = '0'.repeat(lengthMax - ret.length) + ret; return zeroes; } return ret; } return ret.toString().length % 2 === 0 ? ret : '0' + ret; },