0
У меня есть форма на моем мобильном веб-сайте, который открывается после нажатия «расписание встреч». Код формы прост: (см. Ниже). Все работает так, как ожидалось, но когда я нахожусь на мобильном сафари и использую функцию автозаполнения, он перемещает зону, в которой можно щелкнуть, чтобы моя следующая кнопка полностью была выше и отдельно от ее фона. Какие-нибудь подсказки здесь?Курсор смещен с вводом на iOS (webkit)
function meetingSchedulerStepNameVerify()
{
if(document.getElementById('meetingSchedulerInputFirstName').value != '' && document.getElementById('meetingSchedulerInputLastName').value != '')
{
document.getElementById('meetingSchedulerStepNameNextButton').style.backgroundColor = '#5efb7c';
return true;
}
}
function meetingSchedulerStepNameNextButtonPressed()
{
if(document.getElementById('meetingSchedulerInputFirstName').value != '' && document.getElementById('meetingSchedulerInputLastName').value != '')if (document.getElementById('meetingSchedulerStepNameNextButton').style.backgroundColor == 'rgb(94, 251, 124)')
{
alert('yes');
document.getElementById('meetingSchedulerStepName').style.display = 'none';
document.getElementById('meetingSchedulerStepAddress').style.display = 'block';
document.getElementById('meetingSchedulerStepAddressPromptName').innerHTML = document.getElementById('meetingSchedulerInputFirstName').value;
}
else
{
alert(document.getElementById('meetingSchedulerStepNameNextButton').style.backgroundColor);
}
}#meetingSchedulerStepAddress
{
display:none;
width:100%;
text-align:center;
}
#meetingSchedulerStepAddressPrompt
{
width:100%;
font-size:4.5em;
font-family:Roboto;
padding-top:.5em;
padding-bottom:.5em;
background-color:#ffbd4b;
border-radius:2vw;
-webkit-border-radius:2vw;
-moz-border-radius:2vw;
}
#meetingSchedulerStepAddressInputWrapper
{
margin-top:5em;
}
.meetingSchedulerStepAddressLine
{
display:flex;
width:100%;
}
#meetingSchedulerStepAddressInputLine1
{
width:100%;
}
#meetingSchedulerStepAddressInputCity
{
width:100%;
}
#meetingSchedulerStepAddressInputState
{
width:50%;
}
#meetingSchedulerStepAddressInputZipcode
{
width:50%;
}
.meetingSchedulerStepAddressInput
{
font-size:4em;
font-family:Roboto;
text-align:center;
border:0;
-webkit-appearance: none;
}
#meetingSchedulerStepAddressTransitionWrapper
{
margin:0 auto;
margin-top:10em;
width:50em;
height:10em;
}
#meetingSchedulerStepAddressBackButton
{
height:10em;
width:15em;
background-color:red;
float:left;
background-image:url(../../../images/home/mobile/meetingSchedulerBackButton.png);
background-position:center;
background-size:6em 6em;
background-repeat:no-repeat;
border-radius:3vw;
-webkit-border-radius:3vw;
-moz-border-radius:3vw;
}
#meetingSchedulerStepAddressNextButton
{
width:30em;
height:10em;
background-color:lightgray;
float:right;
border-radius:3vw;
-webkit-border-radius:3vw;
-moz-border-radius:3vw;
}
#meetingSchedulerStepAddressNextButtonText
{
font-family:Roboto;
font-size:6em;
padding-top:.1em;
}<div id="meetingSchedulerStepAddressInputWrapper">
<div class="meetingSchedulerStepAddressLine">
<input id="meetingSchedulerStepAddressInputLine1" class="meetingSchedulerStepAddressInput" name="address-line1" placeholder="555 Street Name"/>
</div>
<div class="meetingSchedulerStepAddressLine">
<input id="meetingSchedulerStepAddressInputCity" class="meetingSchedulerStepAddressInput" name="address-level2" placeholder="City"/>
</div>
<div class="meetingSchedulerStepAddressLine">
<input id="meetingSchedulerStepAddressInputState" class="meetingSchedulerStepAddressInput" name="address-level1" value="NJ" placeholder="ST"/>
<input id="meetingSchedulerStepAddressInputZipcode" class="meetingSchedulerStepAddressInput" name="postal-code" type="number" value="08008" placeholder="Zipcode"/>
</div>
</div>
<div id="meetingSchedulerStepAddressTransitionWrapper">
<div id="meetingSchedulerStepAddressBackButton"></div>
<div id="meetingSchedulerStepAddressNextButton"><div id="meetingSchedulerStepAddressNextButtonText">next</div></div>
</div>
В самом деле, OnClick смещена со всеми дивами, а не просто следующая кнопка. – AlexHeuman