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＆amp;桌面，对我来说很好：这里是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

希望它有所帮助

html表单输入并选择不在触摸设备上工作

1 个答案: