mobileSafari iphone上的文本字段輸入中的小'x'？

Question

我一直在尋找這個沒有任何運氣。如果您在搜索字段中專注於iPhone上的google.com，則在右側會出現一個小小的「x」，如果您觸摸它，則會清除該字段的當前值。任何人都知道如何做到這一點？

Answer 1

我使用Safari中的開發菜單，並將用戶代理更改爲iPhone。查看在谷歌的來源，它看起來像他們已經成立自己的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

iPhone網頁開發的一個很好的資源是iphonewebdev。

然而，它似乎是這個特殊的功能不是蘋果的API的一部分（至少從我的研究），而是一個純粹的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 3

這是Apple開發的一種特殊類型的輸入，並且未經W3C批准。如果你使用它，它在無法識別它的瀏覽器上工作正常。

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

還有其他參數，包括域名和搜索結果，以便用戶可以使用他們的搜索歷史記錄。谷歌如何使用這些。

Answer 4

訣竅是聽/在mousedown上綁定事件，這樣點擊事件永遠不會觸發，並且您的輸入元素不會失去焦點。正如上面的google例子。

Answer 5

這是我的jQuery版本，它在開始時隱藏它，並且如果用戶刪除了鍵入的內容，它將刪除'x'。當他們用按鈕刪除文本時，它也會隱藏'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的版本快。

Answer 6

Jquery的移動提供了這樣的：

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