-
-
Save tgedikli/a64bdad1636b1f58daf313e2c0c79ecb to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.input { | |
@apply bg-white rounded-lg w-full max-w-lg px-6 border border-gray-300 py-3 mt-2; | |
&::placeholder { | |
@apply text-gray-dark; | |
} | |
&:focus { | |
@apply border-opacity-0 outline-none shadow-outline-blue; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="form-group" x-data="{ digits: '', date: '', cvc: '', isFocused: false }"> | |
<span>{{ $name }}</span> | |
<div class="max-w-lg flex rounded-lg mt-2 border border-gray-300" @click.away="isFocused = false" | |
:class="isFocused ? 'border-opacity-0 shadow-outline' : ''"> | |
<input @focus="isFocused = true" class="input border-none rounded-r-none min-w-0 w-full mt-0 focus:shadow-none" | |
type="text" placeholder="Card Number" | |
x-model="digits" | |
required | |
name="digits" | |
x-on:input="digits = $event.target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim().slice(0, 19); if (digits.length === 19) $refs.date.focus()"/> | |
<input @focus="isFocused = true" | |
x-ref="date" | |
x-model="date" | |
required | |
x-on:input="date = $event.target.value.replace(/[^0-9 \/]/g, ''); if (date.length === 2) date += ' / ' ; if (date.length === 4 + 3) $refs.cvc.focus()" | |
name="date" | |
class="input border-none rounded-l-none rounded-r-none flex-grow-0 focus:shadow-none w-full mt-0 flex-1" | |
type="text" placeholder="MM / YY" style="min-width: 9rem" /> | |
<input @focus="isFocused = true" class="input border-none rounded-l-none min-w-0 mt-0 focus:shadow-none flex-1" | |
required | |
x-ref="cvc" x-model="cvc" | |
name="cvc" | |
style="min-width: 7rem" | |
maxlength="3" type="text" placeholder="CVC"/> | |
</div> | |
@error(Str::slug($name)) | |
<div role="alert" class="text-error-500 mt-1">{{ $message }}</div> | |
@enderror | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment