logo标签列表

移动端表单错误，但桌面端没有错误。

javascriptphpjqueryhtmlforms
3
我发现了一个HTML表单的错误，但我无法进行调试。我已经两次更改了表单的格式，但在这方面未能提供任何帮助。如果您想查看表单本身的位置，请访问http://driveforeagle.com/apply/page2/。
请注意，您需要访问链接以了解我所引用的内容，以及下面代码的参考。 错误 仅在移动设备上（没有区别设备类型），当您进入“驾驶经验”部分时，两个子部分“交通违章历史”和“驾驶执照历史”中的输入字段都无法点击且无法填写。就像有一些浮动的部分一样，但我无法确定这个浮动的部分来自哪里。 驾驶经验部分 
<article class='panel panel-danger'>
    <header class='panel-heading' role='tab' id='drivingExperienceHeading'>
        <h4 class='panel-title'>
            <a class='collapsed' role='button' data-toggle='collapse' data-parent='#panelMenu' href='#drivingExperience' aria-expanded='false' aria-controls='drivingExperience'> 
            Driving Experience
            </a>
            <span class='glyphicon glyphicon-remove pull-right'></span>
        </h4>
    </header>
    <div id='drivingExperience' class='panel-collapse collapse' role='tabpanel' aria-labelledby='drivingExperienceHeading'>
        <main class='panel-body'>
            <? require_once 'sections/driving_experience.php'; ?>
        </main>
    </div>
</article>

require_once 'sections/driving_experience.php'

<article class='col-xs-12'>
<h5><strong>List all driving experience for the past 10 years</strong></h5>
</article>
<article class='col-xs-12'>
    <h4>Tractor Trailer Experience</h4>
</article>
<section class='clearfix'></section>
<article class='form-group col-md-3 col-sm-6 col-xs-12'>
    <label class='control-label req'>From</label>
    <input type='text' class='form-control addr-date' id='tt-from-date' name='tt-from-date' data-validator='notEmpty|isDateMMYYYY'/>
</article>
<article class='form-group col-md-3 col-sm-6 col-xs-12'>
    <label class='control-label req'>To</label>
    <input type='text' class='form-control addr-date' id='tt-to-date' name='tt-to-date' data-validator='notEmpty|isDateMMYYYY'/>
</article>
<article class='form-group col-md-3 col-sm-6 col-xs-12'>
    <label class='control-label req'>Approximate Miles</label>
    <input type='text' class='form-control' name='tt-miles' id='tt-miles' data-validator='notEmpty|isNumber'/>
</article>
<article class='col-xs-12'>
    <hr />
    <h4>Straight Truck Experience</h4>
</article>
<article class='form-group col-xs-12'>
    <section class='checkbox'>
        <label> 
            <input type="checkbox" name="st_exp"/> No Straight-Truck Experience
        </label>
    </section>
</article>
<article class='form-group col-md-3 col-sm-6 col-xs-12'>
    <label class='control-label req'>From</label>
    <input type='text' class='form-control addr-date' id='st-from-date' name='st-from-date' data-validator='notEmpty|isDateMMYYYY'/>
</article>
<article class='form-group col-md-3 col-sm-6 col-xs-12'>
    <label class='control-label req'>To</label>
    <input type='text' class='form-control addr-date' id='st-to-date' name='st-to-date' data-validator='notEmpty|isDateMMYYYY'/>
</article>
<article class='form-group col-md-3 col-sm-6 col-xs-12'>
    <label class='control-label req'>Approximate Miles</label>
    <input type='text' class='form-control not-empty' id='st-miles' name='st-miles' data-validator='notEmpty|isNumber'/>
</article>
<article class='col-xs-12'>
    <hr />
    <h4>Accident History</h4>
</article>
<article class='col-xs-12'>
    <h5><strong>List all accident records for the past 5 years regardless of fault.</strong></h5>
</article>
<article class='form-group col-xs-12'>
    <section class='checkbox'>
        <label> 
        <input type="checkbox" name="no_accidents" />No Accident History
        </label>
    </section>
</article>
<section id='accident-holder'>
    <article class='accident-form last'>
        <section class='form-group col-md-2 col-sm-6 col-xs-12'>
            <label class='control-label req'>Date</label>
            <input type='text' class='form-control addr-date accident-date' name='accident-date' data-validator='notEmpty|isDateUS'/>
        </section>
        <section class='form-group col-md-3 col-sm6 col-xs-12'>
            <label class='control-label req'>Nature</label>
            <input type='text' class='form-control nature' name="nature" data-validator='notEmpty'/>
        </section>
        <section class='form-group col-md-3 col-sm-6 col-xs-12'>
            <label class='control-label req'>Location</label>
            <input type='text' class='form-control location' name='location' data-validator='notEmpty'/>
        </section>
        <section class='form-group col-md-2 col-sm-6 col-xs-6'>
            <label class='control-label req'>No. of Fatalities</label>
            <input type='tel' class='form-control fatalities' name='fatalities' data-validator='notEmpty|isNumber'>
        </section>
        <section class='form-group col-md-2 col-sm-6 col-xs-6'>
            <label class='control-label req'>No. of Injuries</label>
            <input type='tel' class='form-control injuries' name='injuries' data-validator='notEmpty|isNumber'>
        </section>
    </article>
</section>
<section class='clearfix'></section>
<article class='form-group col-md-12'>
    <a href="" id="add_accident">Add Another Accident Record</a>
</article>
<!-- BEGIN TRAFFIC CITATION HISTORY -->
<article class='col-xs-12'>
    <hr />
    <h4>Traffic Citation History</h4>
</article>
<article class='col-xs-12'>
    <h5>
        <strong>List all traffic citations, convictions, supervision and forfeitures for the last 5 years (other than parking).</strong>
    </h5>
</article>
<article class='form-group col-xs-12'>
    <section class='checkbox'>
        <label> 
        <input type="checkbox" name="no_citations" />No Citations
        </label>
    </section>
</article>
<section id='traffic-holder'>
    <article class='traffic-citation-form last'>
        <section class='form-group col-md-3 col-sm-6 col-xs-12'>
            <label class='control-label req'>Location</label>
            <input type='text' class='form-control citation-location' name='citation-location' data-validator='notEmpty'/>
        </section>
        <section class='form-group col-md-3 col-sm-6 col-xs-12'>
            <label class='control-label req'>Date</label>
            <input type='text' class='form-control addr-date citation-date' name='citation-date' data-validator='notEmpty'/>
        </section>
        <section class='form-group col-md-3 col-sm-6 col-xs-12'>
            <label class='control-label req'>Charge</label>
            <input type='text' class='form-control charge' name='charge' data-validator='notEmpty'/>
        </section>
        <section class='form-group col-md-3 col-sm-6 col-xs-12'>
            <label class='control-label req'>Penalty</label>
            <input type='text' class='form-control penalty' name='penalty' data-validator='notEmpty'/>
        </section>
    </article>
</section>
<article class='col-md-12'>
    <a href="" id="add_citation">Add Another Traffic Citation Record</a>
</article>
    <!-- BEGIN DRIVER LICENSE HISTORY -->
<article class='col-xs-12'>
    <hr />
    <h4>Driver's License History</h4>
</article>
<article class='col-xs-12'>
    <h5>
        <strong>List every driver's license held in the past 3 years</strong>
    </h5>
</article>
<section id='license-holder'>
    <article class='license-form last'>
        <section class='form-group col-md-1 col-sm-3 col-xs-12'>
            <label class='control-label req'>State</label>
            <input type='text' class='form-control license_state' name='license_state' data-validator='notEmpty'/>
        </section>
        <section class='form-group col-md-3 col-sm-6 col-xs-12'>
            <label class='control-label req'>License No.</label>
            <input type='text' class='form-control license_no' name='license_no' data-validator='notEmpty'/>
        </section>
        <section class='form-group col-md-1 col-sm-3 col-xs-12'>
            <label class='control-label req'>Type</label>
            <input type='text' class='form-control license_type' name='license_type' data-validator='notEmpty'/>
        </section>
        <section class='form-group col-md-4 col-sm-6 col-xs-12'>
            <label class='control-label req'>Endorsements</label>
            <input type='text' class='form-control endorsements' name='endorsements' data-validator='notEmpty'/>
        </section>
        <section class='form-group col-md-3 col-sm-6 col-xs-12'>
            <label class='control-label req'>Exp. Date</label>
            <input type='text' class='form-control addr-date license_date' name='license_date' data-validator='notEmpty|isDateMMYYYY'/>
        </section>
    </article>
</section>
<section class='col-md-12'>
    <a href='' id='add_license'>Add Another Driver's License</a>
</section>
<section class='form-group col-xs-12'>
    <hr />
    <label class='control-label radio req'>
        A. Have you ever been denied a license, permit or privilege to operate a motor vehicle?
    </label>
    <label class='radio-inline'>
        <input type='radio' class="radio-check" name='qa' value='1' data-validator='groupNotEmpty'> Yes
    </label>
    <label class='radio-inline'>
        <input type='radio' class="radio-check" name='qa' value='-1'> No
    </label>
</section>
<section class='form-group col-xs-12'>
    <label class='control-label'>If "Yes" please explain:</label>
    <textarea rows='5' id='qa-explain'  name='qa_explain' class='form-control' readonly></textarea>
</section>
<section class='form-group col-xs-12'>  
    <label class='control-label radio req'>
        B. Has any license, permit or privilege ever been suspended or revoked?
    </label>
    <label class='radio-inline'>
        <input type='radio' class="radio-check" name='qb' value='1' data-validator='groupNotEmpty'> Yes
    </label>
    <label class='radio-inline'>
        <input type='radio' class="radio-check" name='qb' value='-1'> No
    </label>
</section>
<section class='form-group col-xs-12'>
    <label class='control-label'>If "Yes" please explain:</label>
    <textarea rows='5' id='qb-explain' name='qb_explain' class='form-control' readonly></textarea>
</section>
<section class='form-group col-xs-12'>
    <label class='control-label radio req'>
        C. Have you ever tested positive or refused a test, on any pre-employment drug or alchohol test administered by an employer to which you applied, but did not obtain safety-sensitive transportation work covered by DOT agency drug and alcohol testing rules during the past two years?
    </label>
    <label class='radio-inline'>
        <input type='radio' class="radio-check" name='qc' value='1' data-validator='groupNotEmpty'> Yes
    </label>
    <label class='radio-inline'>
        <input type='radio' class="radio-check" name='qc' value='-1'> No
    </label>
</section>
<section class='form-group col-xs-12'>
    <label class='control-label radio'>
        If "Yes", can you provide documentation that you successfully passed then returned to work?
    </label>
    <label class='radio-inline'>
        <input type='radio' class='' name='qc_explain' value='1' disabled> Yes
    </label>
    <label class='radio-inline'>
        <input type='radio' class='' name='qc_explain' value='-1' disabled> No
    </label>
</section>
<section class='col-xs-12 form-group'>
    <label class='control-label radio'>
        D. Have you ever been denied access to the mail, or had your postal badge revoked?<span class='req'> *</span>
    </label>
    <label class='radio-inline'>
        <input type='radio' class="radio-check" name='qd' value='1' data-validator='groupNotEmpty'> Yes
    </label>
    <label class='radio-inline'>
        <input type='radio' class="radio-check" name='qd' value='-1'> No
    </label>
</section>
<section class='clearfix'></section>

抱歉第二个文件太长，但我将整个部分都添加进去确保代码完整供分析。再次说明，我对表格本身没有发现任何异常，我找不到任何缺少标签、未关闭标签或类似问题，所以它并没有多大意义。
另外，我还使用一些 JavaScript 来操作表单，因为用户可以添加其他信息，所以它会复制表单。我不确定这是否会产生影响，但是在开始时不存在任何复制的表单，所以我假设它没有影响。无论如何，我将其包含在内以便完整。 Javascript 示例 
 //generate an object of data to consolidate the amount of further coding needed

var multisections = {
'address' : [
    "#add_address",
    "#address-holder",
    ".address-form"
],
'employment' : [
    "#add_employment",
    "#employment-holder",
    ".employment-form"
],
'accident' : [
    "#add_accident",
    "#accident-holder",
    ".accident-form"
],
'citation' : [
    "#add_citation",
    "#traffic-holder",
    ".traffic-citation-form"
],
'license' : [
    "#add_license",
    "#license-holder",
    ".license-form"
]
};


$.each(multisections, function(i, e){
   $(e[0]).on('click', function(event){
    event.preventDefault();
    var parentEl = $(e[1]);
    var lastForm = $.makeArray($(parentEl).find('.last'));  

    var currF = $(lastForm).find('input[name*="fmscr_"]:checked').val();
    var currD = $(lastForm).find('input[name*="drug_testing_"]:checked').val();
    var lastFmscr = $(lastForm).find('input[name*="fmscr_"]').attr('name');
    var lastDrug = $(lastForm).find('input[name*="drug_testing_"]').attr('name');
    var newForm = $(lastForm).clone(true);
    $(newForm).addClass('last replica');
    $(newForm).find('.delete-record').remove();
    $(newForm).prepend('<div class="col-xs-12"><button class="delete-record btn btn-warning pull-right" value="delete">&times</button></div>');
    $(newForm).insertAfter(lastForm);
    $(lastForm).removeClass('last');   
    var i;
   if(e[1] == "#employment_history"){ 

        i = lastFmscr.substr(lastFmscr.length -1); //get the current count
        i = parseInt(i); //turn it to an int
        i++; //increase the count          
        $(newForm).find('input[name="fmscr_'+(i-1)+'"]').attr('name', 'fmscr_'+i);
        $(newForm).find('input[name="drug_testing_'+(i-1)+'"]').attr('name', 'drug_testing_'+i);

    }
    $(newForm).find('input:not([type=radio]), select').val("");
    $(lastForm).find('input[name*="fmscr_"][value='+currF+']').prop('checked', true);
    $(lastForm).find('input[name*="drug_testing_"][value='+currD+']').prop('checked', true);   
    $(newForm).find('input[name="fmscr_'+i+'"]').prop('checked', false);
    $(newForm).find('input[name="drug_testing_'+i+'"]').prop('checked', false);
    newForm.find('.addr-date').each(function(){
        $(this).removeAttr('id').removeClass('hasDatepicker');
        $('.addr-date').datepicker({
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            dateFormat: 'mm/yy',
            onClose: function(dateText, inst) { 
                var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                $(this).datepicker('setDate', new Date(year, month, 1));
                validator('#applicationForm');
                checkHeadings();
            }
        });

    });
    validator('#applicationForm');
    checkHeadings();
});
$(e[2]).on('click', '.delete-record', function(event){
    event.preventDefault();
    $(this).closest(e[2]).prev().addClass('last')
    $(this).closest('.replica').remove();
    validator('#applicationForm');
    checkHeadings();
});
});

如果有任何关于代码方面的进一步需求，请告诉我，我会尽快提供给您！提前感谢您的所有帮助。
你尝试逐步注释JavaScript部分了吗？也许它在移动设备上会出问题。 - Marcos Segovia
是的，我已经尝试过了。另外，你说的“它”在移动设备上会崩溃是什么意思？ - Mark Hill
可能是你正在使用其中任何特殊标签吗？看一下这个链接：http://quirksmode.org/html5/inputs/mobile.html 我不是前端方面的专家。 - Marcos Segovia
更像是设计问题，请检查您的<section>和<article>标签，它们可能已经正确关闭，但在移动设备上重叠，更像是CSS/HTML5渲染问题，我看到有些地方CSS是这样的<section><article>somestuff</article></section>，而其他地方没有<section>只有<article>标签，请尝试使用class="clearfix"，这可能是简短快速的解决方案，当我尝试检查输入元素时，控制台会突出显示另一个<section>，我的建议是将所有<article>标签放在<section>内。 - Shehary
使用我的移动设备（Nexus 5）+Chrome移动检查器，我可以看到即使在JS控制台中发送命令像$('.checkbox').prop('checked',true) ，这些字段也无法获得焦点或选中复选框。这让我认为这不是浮动div或CSS错误引起的问题。你的移动模板中可能存在损坏或未关闭的HTML标签。 - DrewT
1个回答
1
您错过了一个 <section class="clearfix"></section> 标签，它位于以下部分之前： <article class="col-md-12"> <a href="" id="add_citation">Add Another Traffic Citation Record</a> </article> 在以下部分之前，均为误操作表单元素的链接。通过 Firebug 或类似工具，右键点击无法单击的输入框并选择“检查元素”，即可找到错误元素，即覆盖整个表单部分的链接。
原因需要进一步研究……据我所知，所有 col-*-* 都是 float: left;，因此它们不会使容器变大，高度仍为 0。包含添加交通罚单或驾照链接的 <article> 元素也在较大屏幕上 float: left;，但在较小屏幕上则未浮动。

我不是100%确定，但由于它不是浮动元素，它需要至少与前面的元素一样大才能放置在它们后面，并且它会覆盖前面的部分（稍后在代码中出现的元素将覆盖前面的元素）。通常需要清除浮动，以避免出现奇怪的情况...

你是对的，那是解决方案，但为什么会有效？我记得曾经有人给我解释过，但我不太确定为什么。 - Mark Hill
@MarkHill 很好，问题解决了。我也不太确定为什么，但更新了答案，部分地添加了原因说明。 - Zimmi
你可以使用clearfix或<br style="clear:both;">来清除浮动元素的两侧，使页面恢复正常渲染。如果你使用浮动来定位某些元素（例如列），那么你必须清除这个属性以恢复正常的定位。 - Lelio Faieta
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接