screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id="app"> <h3>Vue Input get focus event invalid</h3> <label for="my-input">Enter a password:</label> <input id="my-input" ref="myInput" type="password" v-model="inputValue" :class="{ 'invalid': isInvalid }"> <div v-if="isInvalid" class="error-message">Password must be at least 6 characters long.</div> <button @click="validateInput">Submit</button> </div> <script type="module"> const app = Vue.createApp({ data() { return { inputValue: '', isInvalid: false } }, methods: { validateInput() { const minLength = 6; if (this.inputValue.length < minLength) { this.$refs.myInput.focus(); this.isInvalid = true; } else { this.isInvalid = false; } } } }); app.mount('#app'); </script> <style> #app { display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: Arial, sans-serif; margin-top: 50px; } label { font-size: 16px; margin-bottom: 10px; } input { font-size: 16px; padding: 10px; border: 2px solid #ccc; border-radius: 5px; transition: border-color 0.3s ease; } input.invalid { border-color: red; } button { font-size: 16px; padding: 10px 20px; background-color: #007bff; color: #fff; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; margin-top: 10px; } button:hover { background-color: #0069d9; } .error-message { font-size: 14px; color: red; } </style> </body> </html>