मोबाइल 'सफारी में आईफोन पर टेक्स्टफील्ड इनपुट में थोड़ा' एक्स '?

Question

मैं बिना किसी किस्मत के इसके लिए हर जगह देख रहा हूं। यदि आप खोज क्षेत्र पर फ़ोकस करते समय iphone पर google.com पर जाते हैं तो दाईं ओर एक छोटा 'x' दिखाई देता है और यदि आप इसे स्पर्श करते हैं तो यह फ़ील्ड के वर्तमान मान को साफ़ करता है। किसी को पता है कि इसे कैसे पूरा किया जाए?

Answer 1

मैंने सफारी में विकसित मेनू का उपयोग किया और उपयोगकर्ता एजेंट को आईफोन में बदल दिया। गूगल पर स्रोत देख कर ऐसा लगता है कि वे इस तरह उनके एचटीएमएल सेट कर लेते हैं:

<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> 

और इस जावास्क्रिप्ट का उपयोग कर रहे हैं:

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

आईफोन वेब विकास के लिए वास्तव में एक अच्छा संसाधन iphonewebdev है।

हालांकि ऐसा लगता है कि यह विशेष सुविधा ऐप्पल के एपीआई (कम से कम मेरे शोध से) का हिस्सा नहीं है, बल्कि एक शुद्ध जावास्क्रिप्ट/सीएसएस कार्यान्वयन है।

आप यह कुछ इस तरह के साथ फिर से बना सकते हैं:

<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> 

आप एक्स शैली चाहिए जिससे कि यह इनपुट के अंदर मिश्रण एक छवि हो। और निश्चित रूप से मैं दृढ़ता से एक जावास्क्रिप्ट ढांचे का उपयोग करने की सलाह देता हूं यदि आप कर सकते हैं।

Answer 3

यह ऐप्पल द्वारा विकसित एक विशेष प्रकार का इनपुट है और डब्ल्यू 3 सी द्वारा अनुमोदित नहीं है। यदि आप इसका उपयोग करते हैं, तो यह उन ब्राउज़रों पर ठीक काम करता है जो इसे पहचान नहीं पाते हैं।

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

डोमेन नाम और खोज परिणामों सहित अन्य पैरामीटर हैं ताकि उपयोगकर्ता अपने खोज इतिहास का उपयोग कर सकें। उन लोगों का उपयोग कैसे करें Google।

Answer 4

चाल के लिए सुनने के लिए है/मूसडाउन पर बाइंड इवेंट जिस तरह से क्लिक इवेंट कभी नहीं आग लगती है और आपका इनपुट तत्व फोकस नहीं खोता है। ऊपर Google उदाहरण के रूप में।

Answer 5

और यह मेरा jQuery संस्करण है, यह शुरुआत में इसे छुपाता है, और यदि उपयोगकर्ता टाइप किए गए को हटा देता है तो यह 'x' को हटा देगा। साथ ही जब उन्होंने बटन के साथ टेक्स्ट हटा दिया है तो यह 'x' भी छिपाएगा।

एचटीएमएल:

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

जावास्क्रिप्ट:

$('.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(); 
     }); 
    }); 

जावास्क्रिप्ट संस्करण निश्चित रूप से jQuery संस्करण की तुलना में तेजी है।

Answer 6

Jquery मोबाइल इस प्रदान करता है:

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