需要在android chrome上按两次提交按钮才能提交表单

时间:2017-06-01 09:49:05

标签: android jquery html google-chrome form-submit

需要在android chrome中按两次“提交”按钮

第一次按下提交按钮似乎将提交按钮集中在android chrome中。桌面似乎工作正常。

这是一个jsfiddle,它将在您的手机上显示问题 jsfiddle.net/6okhL9yo/1



$(function() {
    $('#forminschrijven').submit(function(e) {
        e.preventDefault();
     
        $.post('/rest/data.php?d=contact-contact', $('#forminschrijven').serialize(), function() {
            $('#forminschrijven').addClass('libele');
            $('#resultinschrijven').removeClass('libele');
        })
    });
})

.field-label{display:block;margin-bottom:8px;position:relative}.field-label select{border:none;padding:4px 0;border-bottom:1px solid #ddd;width:100%;color:rgba(0,0,0,0.32);display:block;font-size:18px;height:56px;background:#fff}.field-label .field-placeholder{color:rgba(0,0,0,0.32);display:block;font-size:18px;line-height:56px;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transition:all .5s;transition:all .5s}.field-label input{-webkit-appearance:none;appearance:none;background:none;border-radius:0;box-shadow:inset 0 -1px 0 0 rgba(0,0,0,0.16);color:rgba(0,0,0,0.8);font-family:inherit;font-size:18px;height:100%;left:0;top:0;position:absolute;-webkit-transition:all .5s;transition:all .5s;width:100%;border:none;outline:none}.field-label input:focus{box-shadow:inset 0 -1px 0 0 #1c69e6}.field-label input:focus+.field-placeholder{color:rgba(0,0,0,0.32);font-weight:700;letter-spacing:1px;-webkit-transform:scale(.66) translateY(-26%);transform:scale(.66) translateY(-26%);color:#1c69e6}.field-label input:valid+.field-placeholder{color:rgba(0,0,0,0.32);font-weight:700;letter-spacing:1px;-webkit-transform:scale(.66) translateY(-26%);transform:scale(.66) translateY(-26%)}.textarea-label{padding-bottom:8px;margin-top:16px;display:block;height:100%}.textarea-label textarea{font-family:inherit;font-size:18px;line-height:28px;padding:0;resize:none;width:100%;border:none;outline:none;height:100%;background:#fbfbfb;margin-bottom:0;border-bottom:1px solid #d7d7d7;padding:19px}button,.button{display:inline-block;align-items:center;background-color:#cddc39;border-radius:3px;border:none;color:#fff;font-size:.875rem;font-weight:bold;height:3.3125rem;text-align:center;padding:1rem 1.5625rem;text-transform:uppercase}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form class="mt" id="forminschrijven" action="/">
           
                    <label class="field-label" for="naam">
                        <input id="naam" name="naam" required="" type="text">
                        <span class="field-placeholder">Jouw naam</span>
                    </label>
                    <label class="field-label" for="email">
                        <input id="email" name="email" required="" type="text">
                        <span class="field-placeholder">E-mail adres</span>
                    </label>
                    <label class="field-label" for="telefoon">
                        <input ngid="telefoon" name="telefoon" required="" type="text">
                        <span class="field-placeholder">Telefoon nummer</span>
                    </label>
                
            <input  type="submit" class="button mtx2 animted fadeIn" value="schrijf je nu in">
        </form>
&#13;
&#13;
&#13;

0 个答案:

没有答案