I have a strange issue on Chrome (75.0.3770.142). I have vue app with form and two text inputs with different names. When I try to autocomplete the first one it fills the second one instead (and the first input stays empty). I cannot reproduce it out of my application.
My component
<template>
<label class="wrapper" :data-error="validation && errors.first(name)" :class="{ error: errors && errors.first(name), label }">
<span class="label" v-if="label">{{label}}</span>
<div class="input" :class="{
'input--search': type === 'search'
}">
<input
v-if="validation"
:aria-label="ariaLabel"
v-shortkey.focus="shortKey"
:disabled="disabled"
:type="type"
:class="classes"
:value="value"
:name="name"
:placeholder="placeholder"
#search="reset"
#input="update"
v-validate="validation"
:autocomplete="autocomplete"
/>
<input
v-else
:aria-label="ariaLabel"
v-shortkey.focus="shortKey"
:disabled="disabled"
:type="type"
:class="classes"
:value="value"
:name="name"
:placeholder="placeholder"
#search="reset"
#input="update"
:autocomplete="autocomplete"
/>
<Icon class="icon" v-if="iconName && !value" :name="iconName" />
</div>
</label>
</template>
Form:
<template>
<form class="form" v-on:submit.prevent>
<slot />
<Input
v-if="isLabel && displayLabel"
class="label"
ref="label"
type="text"
:label="$t('subscriptions.new.label-placeholder')"
name="label"
:validation="{ required: true }"
:value="label"
#input="onLabelChange"
/>
<hr />
<Terms
v-if="!termsAccepted"
:value="terms"
#input="onTermsToggle"
/>
<Button
class="submit button-next"
submit
:disabled="nextDisabled"
#click="next"
>
{{ $t('subscriptions.new.next') }}
</Button>
</form>
</template>
and screen from Chrome
https://imgur.com/a/hMXVLYP
video:
https://imgur.com/a/gOwulXm
I am not familiar with Vue but you can try using input type as tel for telephone field with attributes like name and autocomplete with values as..
<input type="tel" name="phone" id="yourid" placeholder="+1-650-123-1234" autocomplete="tel">
Not setting autocomplete and incorrect input type for the field could be the reason for this behavior.
Hope this helps.
Related
I am using nebular theme on my project. I am designing login page and I want to add eva user icon to the username input. But I couldn't put the inside of the input.
<form #form='ngForm' class="mb-4" autocomplete="off" (submit)="onSubmit(form)" aria-labelledby="title">
<div class="form-control-group">
<label class="label" for= "input-username">Username :</label>
<input nbInput
fullWidth
type="text"
id="input-username"
placeholder="Username"
fieldSize ="large"
#username="ngModel"
autofocus
name="username"
[(ngModel)]="formModel.username" required
[status]="username.dirty ? (username.invalid ? 'danger' : 'success') : 'basic'">
<ng-container *ngIf="username.invalid && username.touched">
<p class="caption status-danger" *ngIf="username.errors?.required">
Username is required!
</p>
</ng-container>
</div>
Nebular/Input with an icon
Try following codes:
<nb-form-field>
<nb-icon nbPrefix icon="at-outline" pack="eva"></nb-icon>
<input type="text" nbInput>
</nb-form-field>
You can follow their documentation.
I am using google chrome71, and here in input tag, Autocomplete/autosuggestion where the browser does automatically fill the input field is not working in react +HTML.
I have added form tag outside but didn't found any luck to get the autocomplete suggestion.
<form>
<label style={{ display:'none' }} htmlFor='mobile'>Name</label>
<input className=''
type='text' placeholder='Mobile number' autoComplete='tel'
value={props.mobilenumber} name='mobile' id='mobile'
onChange= {props.actionHandler} />
</form>
Here I expect to autocomplete of number, which I used earlier... Appreciate.
From the possible duplicate link provided in comment:
For phone:
Use any of these for name: phone mobile country-code area-code exchange suffix ext
Use any of these for autocomplete: tel
Here is working JSX code,
<iframe style={{ display:'none' }} name='form_name' src='login:blank' />
<form onSubmit={actionName} className='col-sm-12 pad0' target='form_name' action='login:blank'>
<input className=''
type='text' placeholder='Mobile number' autoComplete='tel'
value={props.mobilenumber} name='mobile' id='mobile'
onChange= {props.actionHandler} />
<input type='submit' style={{ display:'none' }} id='inputSubmit' />
</form>
<div className=''>
<button buttonText='Submit'
onClick={
() => {
document.getElementById('inputSubmit').click()
}
} />
</div>
I am currently working on an html5 project in which there is a lot of input fields that I want to replace by textarea.
Example:
<input type="text" id="Questions" name="texte1"/>
<input type="text" id="Questions" name="texte2"/>
<input type="text" id="Questions" name="texte3"/>
There is 200 inputs that I want to change by:
<textarea id="Questions" name="texte1"></textarea>
<textarea id="Questions" name="texte2"></textarea>
<textarea id="Questions" name="texte3"></textarea>
but I can't really use the search and replace tool because the name is different for every input So I was wondering if anyone of you knows a quick way to replace all my inputs by text area without changing the names 1 by 1 on my code.
You need a criterion that tells you which inputs need to be replaced. What do they all have in common? Also note that you cannot have more than one element per page with the same value for id, so the HTML you show is invalid.
So for the example code I'm assuming that all inputs that need to be replaced have a CSS class replace-me:
document.getElementById('replace').addEventListener('click', (e) => {
const toReplace = [...document.querySelectorAll('.replace-me')]
for (const input of toReplace) {
const textarea = document.createElement('textarea')
const parent = input.parentNode
textarea.id = input.id
textarea.name = input.name
textarea.value = input.value
parent.removeChild(input)
parent.appendChild(textarea)
}
})
<div>
<input class="replace-me" type="text" value="1" id="i1" name="foo1" />
<input class="replace-me" type="text" value="2" id="i2" name="foo2" />
<input class="replace-me" type="text" value="3" id="i3" name="foo3" />
<input class="replace-me" type="text" value="4" id="i4" name="foo4" />
<input class="replace-me" type="text" value="5" id="i5" name="foo5" />
</div>
<button type="button" id="replace">Click to replace</button>
I want to validate the form when user click the submit button using bootstrap and angularjs.If any of the field in the form is blank i want to dislay the error message below the blank elements.
Demo : https://plnkr.co/edit/55lFImusbCznYjLXypDu?p=preview
html code:
<form name="myForm" ng-controller="ExampleController">
<div>Select Color : </div>
<label name="team" ng-repeat="color in colorNames" class="checkbox-inline">
<input type="checkbox" name="color" value="{{color}}" ng-checked="selectedColor.indexOf(color) > -1" ng-click="userSelection(color)"> {{color}}
<br> </label><br>
<div ng-show="myForm.$submitted || myForm.color.$touched">
<p class="error-mesg" ng-show="headerForm.color.$error.required">Select the color</p>
</div>
<div class="">
<div style="color: black;">Username : </div>
<input type="text" name="user" value="" required>
<div ng-show="myForm.$submitted || myForm.user.$touched">
<p class="error-mesg" ng-show="myForm.user.$error.required">The Username is required</p>
</div>
</div>
<button type="submit" class="btn btn-primary" ng-click="submitForm(myForm)">Submit</button>
</form>
My above code is failing to show error message below the checkboxes when not selected.I want to show an error message "Please Select the color" below the checkboxes when user click on submit button without selecting atleast one checkbox.And when user click on any of the check box the error message should disappear.
You can add dynamically required for checkbox input: ng-required="selectedColor.length === 0"
if you do not select color, checkboxs will be required, when color is selected, then is it unrequired.
<input ng-required="selectedColor.length === 0" oninvalid="this.setCustomValidity('Please select the color')" type="checkbox" name="color" value="{{color}}" ng-checked="selectedColor.indexOf(color) > -1" ng-click="userSelection(color)">
I want the "EnterTemplate" div to be conditionally available based on the radio buttons. I added the text data-bind at the very bottom for testing purposes, and it returns the "true" or "false" value to me based on the radio button values. I am trying to assign the visible binding this value, but nothing is happening. Any suggestions?
<div><h4>Select Instrument Template:</h4></div>
<div id="ChooseModel">
<strong>Would you like to manually insert number?</strong><br />
<input type="radio" name="ChooseModel" value="True" data-bind="checked: RadioOption"/>#Resx.Yes
<input type="radio" name="ChooseModel" value="False" data-bind="checked: RadioOption"/>#Resx.No
</div>
<div id="EnterTemplate" data-bind="visible: RadioOption">
<div><strong>Model Number: </strong></div>
<div><input data-bind="value: ModelNumberString" /></div>
<div><strong>Manufacturer: </strong></div>
<div><input data-bind="value: ManufacturerString" /></div>
<div>Model Number: <strong data-bind="text: ModelNumberString"></strong></div>
<div>Checked: <strong data-bind="text: RadioOption"></strong></div>
</div>
It will be always visible, because any non empty string is always truthy, you should do this:
data-bind="visible: RadioOption() === 'True'"
Or have other property that is boolean.