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>

我的问题是表格在平板电脑上测试时不起作用（在台式机上很好）。选择类型只是突出显示但不打开以显示选择，相机名称的输入类型也只是突出显示但键盘没有打开。

这是用 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

我已经用你的代码创建了一个小提琴，并做了一些小改动，并在 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

希望对你有帮助