mirror of
https://github.com/Findus23/devicedetector.net.git
synced 2024-09-19 15:43:46 +02:00
add input clear button
This commit is contained in:
parent
033567c250
commit
eb21036d0d
1 changed files with 17 additions and 1 deletions
|
@ -3,8 +3,12 @@
|
||||||
<h1>Device Detector Demo</h1>
|
<h1>Device Detector Demo</h1>
|
||||||
<form @submit.prevent="submit">
|
<form @submit.prevent="submit">
|
||||||
<b-input-group class="mt-3">
|
<b-input-group class="mt-3">
|
||||||
<b-form-input type="text" v-model="userAgent" :disabled="processingServerSide"></b-form-input>
|
<b-form-input type="text" ref="input" v-model="userAgent"
|
||||||
|
:disabled="processingServerSide"></b-form-input>
|
||||||
<b-input-group-append>
|
<b-input-group-append>
|
||||||
|
<button class="btn clearButton" @click="clear" type="button">
|
||||||
|
×
|
||||||
|
</button>
|
||||||
<b-button type="submit" variant="primary" :disabled="processingServerSide">Detect!</b-button>
|
<b-button type="submit" variant="primary" :disabled="processingServerSide">Detect!</b-button>
|
||||||
</b-input-group-append>
|
</b-input-group-append>
|
||||||
</b-input-group>
|
</b-input-group>
|
||||||
|
@ -116,6 +120,11 @@ export default Vue.extend({
|
||||||
submit(): void {
|
submit(): void {
|
||||||
this.$router.replace({name: "main", params: {ua: this.userAgent}});
|
this.$router.replace({name: "main", params: {ua: this.userAgent}});
|
||||||
},
|
},
|
||||||
|
clear(): void {
|
||||||
|
this.userAgent = "";
|
||||||
|
const input = this.$refs.input as HTMLInputElement;
|
||||||
|
input.focus();
|
||||||
|
},
|
||||||
fetchData(ua: string): void {
|
fetchData(ua: string): void {
|
||||||
this.gotData = false;
|
this.gotData = false;
|
||||||
this.serverError = "";
|
this.serverError = "";
|
||||||
|
@ -194,6 +203,13 @@ export default Vue.extend({
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.clearButton {
|
||||||
|
font-weight: bold;
|
||||||
|
margin-left: -35px;
|
||||||
|
z-index: 100 !important;
|
||||||
|
}
|
||||||
|
|
||||||
.mobileonly {
|
.mobileonly {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
|
|
Loading…
Reference in a new issue