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

希望它有帮助