2

デスクトップとタブレットで動作するサイトを構築しようとしています。明らかに、タッチ デバイスには、ボタンのクリックなどのいくつかの課題があります。私はそれを乗り越えましたが、クリックしたボタンでフォームが開きます。このフォームには、いくつかの選択タイプと入力タイプが含まれています。

このボタンをクリックしてください:

<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。これは、 select をタッチ デバイスで動作させるためにここで見つけた質問です。それは機能せず、入力タイプを含むすべてのフィールドが機能する必要があります。

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

ここでの私の目標は、タブレット サイトとデスクトップ サイトの両方で機能する 1 つのサイトを維持することです (モバイル デバイスは異なります)。特に、ボタンとフォームがいくつかしかないためです。そのため、jquery mobile を使用して、タブレット用に別のページを作成することは避けようとしています。

4

1 に答える 1

1

私はあなたのコードでフィドルを作成し、いくつかの小さな変更を加えて、iPhone / iPad & デスクトップでテストしました
。

<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");


});

フィドルへのリンク


それが役に立てば幸い

于 2013-07-16T10:04:54.570 に答える