Браузер iOS / Android: показ увеличенного изображения кнопки на сенсорном управлении - PullRequest
Новая
       26

Браузер iOS / Android: показ увеличенного изображения кнопки на сенсорном управлении

0 голосов
/ 18 мая 2011

Я пытаюсь создать поведение, похожее на клавиатуру iPhone (см. Прилагаемое изображение). Например, когда пользователь запускает и перемещает касание, он видит увеличенную версию элемента, которого касаются, и выбор происходит при касании. Я использую Zepto.

Я могу правильно получить координаты касания, но не могу найти объект, который находится под пальцем. Я использую код ниже, чтобы проверить, какой элемент возвращается в качестве цели события. 

$("#myList li").live('touchmove', function(event) {
  console.log(event.touches[0].target.innerHTML);
});

Всегда возвращает событие, которое было на starttouch.

Вкл. Документация Apple тач должен иметь event.touches event.changedTouches event.targetTouches

Я пытался проверить первый элемент на каждом из объектов, но все они, кажется, содержат только элемент starttouch в качестве цели. Есть что-то, чего я здесь не хватает?

Я правильно получаю координаты касания 

var positionTop = event.touches[0].pageY;
var positionLeft = event.touches[0].pageX;

Если ничего не помогло, я начал думать, что, возможно, есть способ найти DOM-элемент при касании с координатами.

Любые идеи приветствуются.

Behavior similar to iPhone keyboard

1 Ответ

3 голосов
/ 25 мая 2011

Объект, находящийся под событием касания, задается как event.target. Кроме того, вы должны связываться с touchstart и touchend событиями. Посмотрите на этот пример, который я сделал:

http://ampersand.no.de/iOSkeyboard.html

Исходный код: 

<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<style>
body{
    font-family:arial;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.entry{
    border:1px solid green;
    color:darkGreen;
    margin:25px;
    font-size:25px;
    font-family:verdana, arial,"sans serif";
    padding:10px;
    width:500px;
    word-wrap:break-word;
}
.wrapper{
    height:200px;
    position:relative;
    margin:25px;
}
.keyboard{
    position:absolute;
    bottom:0;
}

.key{
    border:1px solid darkGray;
    display:inline-block;
    text-align:center;
    cursor:pointer;
    margin-top:1px;
    border-radius: 4px;
    font-family:arial,"sans serif";
    width:30px;
    height:30px;
    line-height:30px;
}

.shift{
    width:60px;
    margin-left:35px;
}
.spacebar{
    width:126px;
}
.backspace{
    width:60px;
}

.keypress{
    border:1px solid blue;
}

#floatKey{
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    border-bottom:0px;
    border-color:blue;
    font-weight:bold;
    font-size:24px;
    cursor:pointer;
    width:40px;
    height:40px;
    line-height:40px;
    background-color:white;
    -moz-box-shadow: -5px 0px 5px #ccc;
    -webkit-box-shadow: -5px 0px 5px #ccc;
    box-shadow: -5px 0px 5px #ccc;
}

.touchStart{
    border-color:blue;
    border-top:0px;
    border-top-left-radius:0px;
    border-top-right-radius:0px;
    -moz-box-shadow: -5px 5px 5px #ccc;
    -webkit-box-shadow: -5px 5px 5px #ccc;
    box-shadow: -5px 5px 5px #ccc;
}

</style>
</head>

<body>
<h3>iOS-style keyboard examples</h3>
<div class="entry">|</div>

<div class="wrapper">
    <div>With mouse events:</div>
    <div class="keyboard" id="mousekb">
        <div class="row">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            <span>0</span>
        </div>
        <div class="row">
            <span>q</span>
            <span>w</span>
            <span>e</span>
            <span>r</span>
            <span>t</span>
            <span>y</span>
            <span>u</span>
            <span>i</span>
            <span>o</span>
            <span>p</span>
        </div>
        <div class="row" style="margin-left:18px">
            <span>a</span>
            <span>s</span>
            <span>d</span>
            <span>f</span>
            <span>g</span>
            <span>h</span>
            <span>j</span>
            <span>k</span>
            <span>l</span>
        </div>
        <div class="row">
            <span>z</span>
            <span>x</span>
            <span>c</span>
            <span>v</span>
            <span>b</span>
            <span>n</span>
            <span>m</span>
            <span>,</span>
            <span>.</span>
        </div>
        <div class="row">
            <span class="shift">shift</span>
            <span class="spacebar">&nbsp;</span>
            <span class="backspace">&lArr;</span>
        </div>
    </div>
</div>

<div class="entry">|</div>
<div class="wrapper">
    <div>With touch events (zoom in for better view):</div>
    <div class="keyboard" id="touchkb">
        <div class="row">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            <span>0</span>
        </div>
        <div class="row">
            <span>q</span>
            <span>w</span>
            <span>e</span>
            <span>r</span>
            <span>t</span>
            <span>y</span>
            <span>u</span>
            <span>i</span>
            <span>o</span>
            <span>p</span>
        </div>
        <div class="row" style="margin-left:18px">
            <span>a</span>
            <span>s</span>
            <span>d</span>
            <span>f</span>
            <span>g</span>
            <span>h</span>
            <span>j</span>
            <span>k</span>
            <span>l</span>
        </div>
        <div class="row">
            <span>z</span>
            <span>x</span>
            <span>c</span>
            <span>v</span>
            <span>b</span>
            <span>n</span>
            <span>m</span>
            <span>,</span>
            <span>.</span>
        </div>
        <div class="row">
            <span class="shift">shift</span>
            <span class="spacebar">&nbsp;</span>
            <span class="backspace">&lArr;</span>
        </div>
    </div>
</div>

<div id="floatKey" class="key" style="display:none"></div>

<script>
SHIFT=false;
$('.keyboard span').addClass('key');


function touchStart(ev){
    ev.preventDefault();
    var o=$(ev.target).offset();
    $('#floatKey').html($(ev.target).html())
        .show()
        .offset({top:(o.top-$('#floatKey').outerHeight()), left:(o.left-5)});
    $(ev.target).addClass('touchStart');
}

function touchEnd(ev){
    ev.preventDefault();
    $('#floatKey').hide();
    $(ev.target).removeClass('touchStart');
}

function keyrelease(ev){
    ev.preventDefault();
    outlineKey(ev.target);
    $(ev.target).removeClass('keydown');
    $('#floatKey').removeClass('keydown');
    var text=$('.entry').eq(0).text();
    $('.entry').text(text.substr(0,text.length-1)+$(ev.target).text()+'|');
}

function shiftKey(ev){
    ev.preventDefault();
    if(SHIFT){
        $('.keyboard span').not('.shift').each(function(idx,el){
            $(el).text($(el).text().toLowerCase());
        })
        $(ev.target).removeClass('keypress');
        SHIFT=false;
    }else{
        $('.keyboard span').not('.shift').each(function(idx,el){
            $(el).text($(el).text().toUpperCase());
        })
        $(ev.target).addClass('keypress');
        SHIFT=true;
    }

}

function outlineKey(el){
    $(el).addClass('keypress');
    setTimeout(function(){
        $(el).removeClass('keypress')
    },500);
}
function backspace(ev){
    ev.preventDefault();
    outlineKey(ev.target);
    var text=$('.entry').eq(0).text();
    $('.entry').text(text.substr(0,text.length-2)+'|');
}

//mouse keyboard
$('#mousekb span').not('.spacebar,.shift,.backspace').bind('mouseenter',touchStart);
$('#mousekb span').not('.spacebar,.shift,.backspace').bind('mouseout',touchEnd)
$('#mousekb span').not('.shift,.backspace').bind('mouseup',keyrelease)
$('#mousekb .shift').bind('mouseup',shiftKey);
$('#mousekb .backspace').bind('mouseup',backspace);

//touch keyboard:
$('#touchkb span').not('.spacebar,.shift,.backspace').bind('touchstart',touchStart);
$('#touchkb span').not('.spacebar,.shift,.backspace').bind('touchend',touchEnd);
$('#touchkb span').not('.shift,.backspace').bind('touchend',keyrelease)
$('#touchkb .shift').bind('touchend',shiftKey);
$('#touchkb .backspace').bind('touchend',backspace);

</script>
</body>

UPDATE Хорошо, я нашел это, и 'это' называется document.getElementFromPoint(). На сайте Mozilla есть некоторая документация (https://developer.mozilla.org/En/DOM/Document.elementFromPoint).. Элемент получит координаты сверху и слева. Это можно легко использовать для отслеживания того, над какой клавишей в данный момент находится палец. Я обновил пример кода, чтобы использовать этот удивительный Функция. Вот некоторые обновленные функции, которые получают текущий сенсорный элемент и обновляют «клавишу при наведении»: 

//functions for touchmove implementation:
function getElAtTouchPosition(ev){
    var touch = ev.originalEvent.touches[0] || ev.originalEvent.changedTouches[0] || ev.touches[0];
    var top = touch.pageY;
    var left = touch.pageX;
    var el=document.elementFromPoint(left,top);
    if(el.className=='key'){
        return el;
    }else{
        return null;
    }
}

function move(ev){
    ev.stopImmediatePropagation();
    var el=getElAtTouchPosition(ev);
    if(el.className=='key' && el!=currentHoverKey){
        updateFloatKey(el);
        currentHoverKey=el;
    }
}
function updateFloatKey(el){
    var o=$(el).offset();
    $(currentHoverKey).removeClass('touchStart');
    $('#floatKey').html($(el).html())
        .show()
        .offset({top:(o.top-$('#floatKey').outerHeight()), left:(o.left-5)});
    $(el).addClass('touchStart');
}

function touchStart2(ev){
    ev.preventDefault();
    updateFloatKey(ev.target);
    currentHoverKey=ev.target;
}

function touchStop2(ev){
    $(currentHoverKey).removeClass('touchStart');
    $('#floatKey').hide();
}

Посмотрите пример , чтобы увидеть, как все это используется. Я проверил это на iPad 2 (iOS 4.3), и это работает. Это все еще нуждается в некоторой настройке для улучшения плавности и учета случаев, когда сенсорное движение заканчивается неключевым элементом. Мне было бы интересно посмотреть, как это работает на Android. Я не закончил код ввода текста для третьей клавиатуры, но вы можете объединить некоторые из моего предыдущего кода, чтобы заставить его работать. Удачи.

Примечание: чрезвычайно важно заблокировать распространение события "перебросить касанием" / всплывающее дерево DOM. Если он распространяется, то он превращается в прокрутку, и во время прокрутки на устройствах iOS манипулирование DOM отключено , поэтому вы не сможете обновить «клавишу наведения». Вам необходимо учитывать все крайние случаи, когда событие touchmove запускается над неключевым элементом.

...