немного «х» в поле ввода текста на iphone в mobileSafari

Question

Я искал это везде без всякой удачи. Если вы перейдете на google.com на iphone и сфокусируете свое внимание на поле поиска, в правой части экрана появится маленький значок «х», а если дотронуться до него, очистится текущее значение поля. Кто-нибудь знает, как этого добиться?

Answer 1

Я использовал меню разработки в Safari и изменил пользовательский агент на iPhone. Просматривая источник в Google, похоже, что они настроили свой HTML так:

<div class="gp2">
<input class="gp7" id="query" type="text" name="q" size="30" maxlength="2048" autocorrect="off" autocomplete="off" />
<a class="clear" id="clearQuery" href="#">
    <img src="data:image/gif;base64,R0lGODlhAQABAID%2FAMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D" alt="" />
</a>

и используете этот JavaScript:

function initClearQueryLink(query,clearQuery){
    clearQuery.setAttribute("title","Clear");
    clearQuery.addEventListener("mousedown",clearQueryBox,true);
    query.addEventListener("keyup",_handleClearQueryLink,false)
}

function _handleClearQueryLink(){
    var query=document.getElementById("query");
    var clearQuery=document.getElementById("clearQuery");
    if(clearQuery)
        if(query.value.length>0){
            clearQuery.style.display="inline";
            clearQuery.style.visibility="visible"
        } else{
            clearQuery.style.display="none";
            clearQuery.style.visibility="hidden"
        }
}

function clearQueryBox(event){
    var query=document.getElementById("query");
    var clearQuery=document.getElementById("clearQuery");
    query.value="";
    clearQuery.style.display="none";
    clearQuery.style.visibility="hidden";
    hideSuggest();
    if(event)event.preventDefault()
}

Answer 2

Это особый тип ввода, разработанный Apple и не одобренный W3C. Если вы используете его, он отлично работает в браузерах, которые его не распознают.

<input type="search" name="q" />

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

Answer 3

Хитрость заключается в том, чтобы прослушивать событие / bind в mousedown таким образом, чтобы событие щелчка никогда не срабатывало и ваш элемент ввода не терял фокус. Как в примере Google выше.

Answer 4

Мобильный Jquery обеспечивает это:

http://jquerymobile.com/test/docs/forms/search/

Answer 5

Действительно хорошим ресурсом для веб-разработки для iPhone является iphonewebdev .

Однако, похоже, что эта особенность не является частью API Apple (по крайней мере, из моих исследований), а является чисто реализацией javascript / css.

Вы можете воссоздать его примерно так:

<script>
    window.onload = function() {
        var btn = document.getElementById("clear_input");
        btn.onclick = function() {
            var div = btn.parentNode;
            var input = div.getElementsByTagName("input")[0];
            input.value = "";
            return false;
        }
    }
</script>
<div>
    <input type="text" /><a href="#" id="clear_input">X</a>
</div>

Вы должны присвоить X стиль изображения, чтобы оно сливалось с входными данными. И, конечно, я настоятельно рекомендую использовать JavaScript-фреймворк, если можете.

Answer 6

И это моя версия jQuery, она скрывает ее при запуске, и если пользователь удаляет набранное, он удаляет 'x'. Также, когда они удалили текст с помощью кнопки, он также скроет «х».

HTML

<input type="search" name="search" id="search" />
<a href="#" class="clear_input">X</a>

JavaScript

$('.clear_input').hide();   
    $('#search').keyup(function() {

        var search = $(this).val().replace(/^\s+|\s+$/g,"");

        if (search.length >= 1) {
            $('.clear_input').show();
        } else {
            $('.clear_input').hide();
        }

        $('.clear_input').click(function() {
            $('#search').val('');
            $('.clear_input').hide();
        }); 
    });

Версия JavaScript, конечно, быстрее, чем версия jQuery.