jquery - html 表单输入和选择不适用于触摸设备

Question

我正在尝试构建一个可以在台式机和平板电脑上运行的网站。显然，触摸设备会带来一些挑战，例如按钮点击。我已经过去了，但现在我点击的按钮打开了一个表格。此表单包含一些选择和输入类型。

单击此按钮:

<button class="addwebcam">Add Webcam</button>

这会打开一个表单:

<div id="cameraformwebcam" title="Add a webcam">
    <form id='AddCameraFormWebcam' action=''>
        <p>
        <label for="CameraName">Camera name:
        <span class="small">Enter label for camera</span>
        </label>
        <input type="text" id="CameraName" name="camera_name" size="24" maxlength="36" />
        </p>
        <p>
        <label for='CameraQuality'>Camera quality:
        <span class="small">Select camera quality</span>
        </label>
        <select id='CameraQuality' name='camera_quality'>
            <option value='HIGH' selected='selected'>High</option>
            <option value='MEDIUM'>Medium</option>
            <option value='MOBILE'>Mobile</option>
        </select>
        </p>
        <p>
        <label for='CameraStatus'>Motion detection:
        <span class="small">Turn motion detection on/off</span>
        </label>
        <select id='CameraStatus' name='camera_status'>
            <option value='ENABLED' selected='selected'>On</option>
            <option value='DISABLED'>Off</option>
        </select>
        </p>
        <p>
        <label for='EmailNotice'>Email notice:
        <span class="small">Turn email notices on/off</span>
        </label>
        <select id='EmailNotice' name='email_notice'>
            <option value='ENABLED' selected='selected'>On</option>
            <option value='DISABLED'>Off</option>
        </select>
        </p>
        <p>
        <label for='CameraSensitivity'>Camera sensitivity:
        <span class="small">Select camera sensitivity</span>
        </label>
        <select id='CameraSensitivity' name='camera_sensitivity'>
            <option value='HIGH'>High</option>
            <option value='AVERAGE' selected='selected'>Average</option>
            <option value='LOW'>Low</option>
        </select>
        </p>
        <input type='hidden' name='camera_type' value='WEBCAM' />
        <button type='submit' class='submit_camera' name='addcamera' value='Add'>Add</button>
        <button type='reset' class='cancel_changes' name='cancel_changes' value='Cancel'>Cancel</button>
    </form>
    </div>

我的问题是该表单在平板电脑上测试时不起作用(在台式机上就可以)。 select 类型只是突出显示但不会打开以显示选择，相机名称的输入类型也只是突出显示但键盘不会打开。

这是用 jquery 处理的:

jQuery(".addwebcam").live('touchstart click', function(event){
    event.stopPropagation();
    touchStart(event);
    if(event.handled !== true) {

        jQuery('#cameraformwebcam').show();
    jQuery('.addwebcam').hide();

        event.handled = true;
    } else {
        return false;
    }
});

您会注意到 touchStart 函数。这是我发现的一个问题 here 以选择在触摸设备上工作。那行不通，而且我需要所有字段都有效，包括输入类型。

function touchStart(event) {
   if (event.target.tagName != 'SELECT') {
      event.preventDefault();
   }
}

我的目标是保留一个同时适用于平板电脑和桌面网站(移动设备不同)的网站。特别是因为它只有几个按钮和表格。所以我尽量避免使用 jquery mobile 并为平板电脑创建一个单独的页面。

Answer 1

我用你的代码创建了一个 fiddle，并做了一些小改动并在 iphone/ipad 和桌面上测试了它，对我来说工作正常:
这里 html:

<button id="addwebcam">Add Webcam</button>
<div id="cameraformwebcam" title="Add a webcam">
    <form id='AddCameraFormWebcam' action=''>
        <p>
            <label for="CameraName">Camera name: <span class="small">Enter label for camera</span>

            </label>
            <input type="text" id="CameraName" name="camera_name" size="24" maxlength="36" />
        </p>
        <p>
            <label for='CameraQuality'>Camera quality: <span class="small">Select camera quality</span>

            </label>
            <select id='CameraQuality' name='camera_quality'>
                <option value='HIGH' selected='selected'>High</option>
                <option value='MEDIUM'>Medium</option>
                <option value='MOBILE'>Mobile</option>
            </select>
        </p>
        <p>
            <label for='CameraStatus'>Motion detection: <span class="small">Turn motion detection on/off</span>

            </label>
            <select id='CameraStatus' name='camera_status'>
                <option value='ENABLED' selected='selected'>On</option>
                <option value='DISABLED'>Off</option>
            </select>
        </p>
        <p>
            <label for='EmailNotice'>Email notice: <span class="small">Turn email notices on/off</span>

            </label>
            <select id='EmailNotice' name='email_notice'>
                <option value='ENABLED' selected='selected'>On</option>
                <option value='DISABLED'>Off</option>
            </select>
        </p>
        <p>
            <label for='CameraSensitivity'>Camera sensitivity: <span class="small">Select camera sensitivity</span>

            </label>
            <select id='CameraSensitivity' name='camera_sensitivity'>
                <option value='HIGH'>High</option>
                <option value='AVERAGE' selected='selected'>Average</option>
                <option value='LOW'>Low</option>
            </select>
        </p>
        <input type='hidden' name='camera_type' value='WEBCAM' />
        <button type='submit' class='submit_camera' name='addcamera' value='Add'>Add</button>
        <button type='reset' class='cancel_changes' name='cancel_changes' value='Cancel'>Cancel</button>
    </form>
</div>

这里 js:

$('#cameraformwebcam').hide();
$("#addwebcam").click(function(event){

    event.stopPropagation();
    touchStart(event);
    if(event.handled !== true) {

        $('#cameraformwebcam').show();
    $('.addwebcam').hide();

        event.handled = true;

    } else {
        return false;
    }
});

function touchStart(event) {
   if (event.target.tagName != 'SELECT') {
      event.preventDefault();
       alert(event);
   }
}
$('.submit_camera').click(function(){
    alert("Send data");


});

Link to fiddle

希望对你有帮助