在mobileSafari的iphone上输入文字字段中的小'x'？

Question

没有任何运气,我一直在寻找这个.如果你专注于搜索字段时在iphone上访问google.com,右边会出现一点'x',如果你触摸它,它会清除字段的当前值.谁知道怎么做到这一点？

Answer 1

这是Apple开发的一种特殊类型的输入,未经W3C批准.如果您使用它,它可以在无法识别它的浏览器上正常工作.

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

还有其他参数,包括域名和搜索结果,因此用户可以使用他们的搜索历史记录.谷歌如何使用这些.

Answer 2

我在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()
}