इनपुट टेक्स्ट के अंदर स्पष्ट आइकन

Question

क्या इनपुट तत्व को स्वयं साफ़ करने के अधिकार पर एक आइकन के साथ एक इनपुट टेक्स्ट एलिमेंट बनाने का एक त्वरित तरीका है (जैसे गूगल सर्च बॉक्स)?

मैंने चारों ओर देखा लेकिन मुझे केवल इनपुट तत्व की पृष्ठभूमि के रूप में एक आइकन कैसे मिला। वहाँ एक jQuery प्लगइन या कुछ और है?

मुझे इनपुट टेक्स्ट एलीमेंट के अंदर आइकन चाहिए, कुछ इस तरह:

--------------------------------------------------
|                                               X|
--------------------------------------------------

Comments

एक jQuery प्लगइन एक इनपुट बॉक्स पर एक छवि की स्थिति के लिए? क्या मुझे कुछ याद आ रहा है या क्या ?!

— क्रिश्चियन

@Christian Sciberras जैसा कि आप मेरे द्वारा चुने गए उत्तर से देख सकते हैं, यह एक jquery प्लगइन हो सकता है ...

— Giovanni Di Milia

सादे अलर्ट बॉक्स दिखाने के लिए आपके पास एक jQuery प्लगइन हो सकता है। इसका मतलब यह नहीं है कि आपके पास वास्तव में है , और ज्यादातर मामलों में, यह अति-इंजीनियर ब्लोट है । ओह और वैसे, आपने जो चुना वह jQuery प्लगइन नहीं है , बल्कि जावास्क्रिप्ट, html और css का मिश्रण है। एक प्लगइन एक फ़ाइल / स्क्रिप्ट होगी जिसमें संबंधित विवरण सहित jQuery के हस्ताक्षर होंगे।

— क्रिश्चियन

@Christian Sciberras: मैं jQuery प्लगइन और जावास्क्रिप्ट और CSS के मिश्रण के बीच अंतर कर सकता हूं। जो मैं कह रहा था कि अगर आप कुछ अच्छा करना चाहते हैं, तो आप केवल एक इमेज को इनपुट बॉक्स पर नहीं डाल सकते।

— गियोवन्नी डि मिलिया

इस समस्या की तलाश कर रहे लोगों को इस जानकारी की भी आवश्यकता होगी: आप "खोज" एचटीएमएल 5 इनपुट की समाशोधन का पता कैसे लगाते हैं?

— ब्रासोफिलो

Answer 1

type="search"अपने इनपुट में एक जोड़ें
समर्थन बहुत सुंदर है, लेकिन IE <10 में काम नहीं करेगा

<input type="search">

---

पुराने ब्राउज़रों के लिए क्लैरेबल इनपुट

अगर आपको IE9 सपोर्ट की जरूरत है तो यहां कुछ वर्कअराउंड हैं

एक मानक <input type="text">और कुछ HTML तत्वों का उपयोग करना :

/**
 * Clearable text inputs
 */
$(".clearable").each(function() {
  
  var $inp = $(this).find("input:text"),
      $cle = $(this).find(".clearable__clear");

  $inp.on("input", function(){
    $cle.toggle(!!this.value);
  });
  
  $cle.on("touchstart click", function(e) {
    e.preventDefault();
    $inp.val("").trigger("input");
  });
  
});

/* Clearable text inputs */
.clearable{
  position: relative;
  display: inline-block;
}
.clearable input[type=text]{
  padding-right: 24px;
  width: 100%;
  box-sizing: border-box;
}
.clearable__clear{
  display: none;
  position: absolute;
  right:0; top:0;
  padding: 0 8px;
  font-style: normal;
  font-size: 1.2em;
  user-select: none;
  cursor: pointer;
}
.clearable input::-ms-clear {  /* Remove IE default X */
  display: none;
}

<span class="clearable">
  <input type="text" name="" value="" placeholder="">
  <i class="clearable__clear">&times;</i>
</span>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

केवल एक का उपयोग करना <input class="clearable" type="text">(कोई अतिरिक्त तत्व नहीं)

एक सेट करें class="clearable"और यह पृष्ठभूमि छवि के साथ खेलें:

/**
 * Clearable text inputs
 */
function tog(v){return v?'addClass':'removeClass';} 
$(document).on('input', '.clearable', function(){
    $(this)[tog(this.value)]('x');
}).on('mousemove', '.x', function( e ){
    $(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');
}).on('touchstart click', '.onX', function( ev ){
    ev.preventDefault();
    $(this).removeClass('x onX').val('').change();
});

// $('.clearable').trigger("input");
// Uncomment the line above if you pre-fill values from LS or server

/* Clearable text inputs */
.clearable{
  background: #fff url(http://i.stack.imgur.com/mJotv.gif) no-repeat right -10px center;
  border: 1px solid #999;
  padding: 3px 18px 3px 4px;     /* Use the same right padding (18) in jQ! */
  border-radius: 3px;
  transition: background 0.4s;
}
.clearable.x  { background-position: right 5px center; } /* (jQ) Show icon */
.clearable.onX{ cursor: pointer; }              /* (jQ) hover cursor style */
.clearable::-ms-clear {display: none; width:0; height:0;} /* Remove IE default X */

<input class="clearable" type="text" name="" value="" placeholder="" />


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

jsBin डेमो

चाल कुछ सही गद्दी सेट करने के लिए है (मैंने 18px का उपयोग किया) inputऔर पृष्ठभूमि-छवि को दाईं ओर धकेल दिया, दृष्टि से बाहर (मैंने उपयोग किया right -10px center)।
वह 18px पैडिंग आइकन के नीचे पाठ को छिपाने से रोक देगा (जबकि दृश्यमान)।
jQ स्पष्ट आइकन दिखाते हुए वर्ग x(यदि inputमूल्य है) जोड़ देगा ।
अब हमें बस जरूरत है कि jQ के साथ इनपुट्स को क्लास के साथ टारगेट किया जाए xऔर यह पता लगाया mousemoveजाए कि माउस उस 18px "x" एरिया के अंदर है या नहीं; यदि अंदर है, तो कक्षा जोड़ें onX। कक्षा को
क्लिक करने से onXसभी कक्षाएं निकल जाती हैं, इनपुट मान को रीसेट करता है और आइकन को छुपाता है।

---

7x7px gif:

Base64 स्ट्रिंग:

data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=

Comments

मैंने इस कोड में कुछ विचारों को टैग क्लाउड जनरेटर (शुद्ध सीएसएस टैग और अपवोट और डाउनवोट बटन के साथ) बनाने के लिए लिया था। मुझे आशा है कि यह आपके ब्राउज़र में ठीक लग रहा है; इसे jsfiddle.net/7PnKS पर देखें

— mrBorna

वाह, वास्तव में अच्छा समाधान। यही मैं ढूंढ रहा हूं। धन्यवाद। लेकिन, मैं बूटस्ट्रैप 3 ग्लिफ़िकॉन का उपयोग करने के लिए "x" छवि कैसे बदल सकता हूं? क्योंकि ग्लिफ़िकॉन फ़ॉन्ट है, इसलिए, जब वह ज़ूम आउट करता है तो यह बेहतर प्रदर्शित होता है।

— user1995781

अच्छा है, लेकिन पृष्ठभूमि की छवि अन्य सीएसएस के साथ टकरा सकती है। : Wldaunfr से नीचे इस सवाल का जवाब एक साफ jQuery के प्लग में संदर्भित करता है plugins.jquery.com/clearsearch

— निक वेस्टगेट

मेरे लिए नवीनतम फ़ायरफ़ॉक्स और क्रोम में अच्छी तरह से काम करता है। लेकिन इसे iOS पर काम .on('touchstart click', '.onX', ...करने के लिए बदलना पड़ा .on('touchstart click', '.onX, .x', ...।

— कृत्तिकरत्ज़ी ११:१५ बजे

@ RokoC.Buljan मैंने अभी फिर से परीक्षण किया है और यहाँ मेरा निष्कर्ष है 1) इनपुट टेक्स्ट बॉक्स 2 में कुछ वर्णों को इनपुट करें) 'X' आइकन दिखाई देता है 3) 'X' आइकन पर क्लिक करने की कोशिश की जाती है, लेकिन पाठ पाठ स्पष्ट नहीं होता है। नोट: इस समय, iPhone कीबोर्ड अभी भी सक्रिय है और छिपा नहीं है। 4) यदि मैंने कीबोर्ड को छिपाने के लिए "डन" बटन पर क्लिक किया है और फिर 'X' आइकन पर वापस क्लिक करें, तो पाठ अभी ठीक से साफ़ हो जाएगा। लगता है कि जब iPhone कीबोर्ड दिखाया गया है तो मैं 'X' से टेक्स्ट को क्लियर नहीं कर पा रहा हूं।

— Withhelds

Answer 2

क्या मैं सुझाव दे सकता हूं, यदि आप इसे html 5 आज्ञाकारी ब्राउज़रों तक सीमित रखते हैं, तो बस इसका उपयोग कर रहे हैं:

<input type="search" />

जेएस फिडेल डेमो

स्पष्ट रूप से , क्रोमियम (उबंटू 11.04) में, यह स्पष्ट पाठ छवि / कार्यक्षमता प्रकट होने से पहलेinput तत्व के अंदर पाठ होने की आवश्यकता है ।

संदर्भ:

• HTML 5 में गोता लगाएँ: पागलपन का एक रूप ।
• इनपुट प्रकार = खोज - खोज क्षेत्र (नया) एचटीएमएल 5 ।

Comments

अन्य डेवलपर्स के लिए एक मदद: यदि आप बूटस्ट्रैप सीएसएस प्लेटफॉर्म हटाने की शैली का उपयोग करते हैं "-webkit- उपस्थिति: टेक्स्टफील्ड;" bootstrap.css इनपुट में [type = "search"] {-bbkit-box-sizing: content-box; -मोज़-बॉक्स-आकार: सामग्री-बॉक्स; बॉक्स-आकार: सामग्री-बॉक्स; -webkit- उपस्थिति: टेक्स्टफील्ड; }

— रिकार्डो बासीलीची

क्या एक्स का रंग बदलने का एक तरीका है?

— रोटेट्रज़

@RiccardoBassilichi मेरी css फ़ाइल को विस्तारित करने का एक तरीका है ताकि मुझे मूल बूटस्ट्रैप को संपादित करने की जरूरत नहीं है। अभी भी यह काम कर रहा है?

— सुपरसन

मेरे ख़्याल से नहीं! लेकिन मैं एक सीएसएस जादूगर नहीं हूँ! :-(

— रिकार्डो बासीलीची

दुर्भाग्य से यह फ़ायरफ़ॉक्स द्वारा समर्थित नहीं है, देखें: developer.mozilla.org/en-US/docs/Web/CSS/…

— Guillaume Husta

Answer 3

आप एक छवि के साथ स्टाइल रीसेट बटन का उपयोग कर सकते हैं ...

<form action="" method="get">
   <input type="text" name="search" required="required" placeholder="type here" />
   <input type="reset" value="" alt="clear" />
</form>

<style>
   input[type="text"]
   {
      height: 38px;
      font-size: 15pt;
   }

   input[type="text"]:invalid + input[type="reset"]{
     display: none;
   } 

   input[type="reset"]
   {
      background-image: url( http://png-5.findicons.com/files/icons/1150/tango/32/edit_clear.png );
      background-position: center center;
      background-repeat: no-repeat;
      height: 38px;
      width: 38px;
      border: none;
      background-color: transparent;
      cursor: pointer;
      position: relative;
      top: -9px;
      left: -44px;
   }
</style>

इसे यहां देखें: http://jsbin.com/uloli3/63

Comments

यह पूरे फॉर्म को रीसेट करता है, न कि केवल एक फील्ड

— कोनंग

इनपुट खाली होने पर रीसेट छवि कैसे छिपाएं? क्या आप, KOGI एक जीवंत उदाहरण दे सकते हैं?

— हैरी

Answer 4

मैंने सीएसएस में एक क्लीएबल टेक्स्टबॉक्स बनाया है। इसे काम करने के लिए किसी जावास्क्रिप्ट कोड की आवश्यकता नहीं है

नीचे डेमो लिंक है

http://codepen.io/shidhincr/pen/ICLBD

Comments

अति उत्कृष्ट! ब्राउज़र समर्थन के बारे में कुछ जानकारी सहायक होगी।

— इयान न्यूजन

यह आज मेरे लिए एफएफ 27.0.1 में टूट गया है।

— निक वेस्टगेट

'X' बटन के लिए जगह बनाने के लिए पाठ को रिपॉजिट नहीं किया जा रहा है। आप पाठ को बटन के पीछे नहीं देख सकते।

— क्रिमसनक्रिस

यह अभी भी पूरे फॉर्म को साफ करता है, न कि केवल एक क्षेत्र को।

— एरिक वैलैंड

Answer 5

एमडीएन के अनुसार , <input type="search" />वर्तमान में सभी आधुनिक ब्राउज़रों में समर्थित है:

<input type="search" value="Clear this." />

---

हालाँकि, यदि आप अलग-अलग व्यवहार चाहते हैं, जो यहां ब्राउज़रों के अनुरूप है, तो कुछ हल्के-फुल्के विकल्प हैं जिनकी केवल जावास्क्रिप्ट की आवश्यकता होती है:

विकल्प 1 - हमेशा 'x' प्रदर्शित करें: (उदाहरण यहाँ)

Array.prototype.forEach.call(document.querySelectorAll('.clearable-input>[data-clear-input]'), function(el) {
  el.addEventListener('click', function(e) {
    e.target.previousElementSibling.value = '';
  });
});

.clearable-input {
  position: relative;
  display: inline-block;
}
.clearable-input > input {
  padding-right: 1.4em;
}
.clearable-input > [data-clear-input] {
  position: absolute;
  top: 0;
  right: 0;
  font-weight: bold;
  font-size: 1.4em;
  padding: 0 0.2em;
  line-height: 1em;
  cursor: pointer;
}
.clearable-input > input::-ms-clear {
  display: none;
}

<p>Always display the 'x':</p>

<div class="clearable-input">
  <input type="text" />
  <span data-clear-input>&times;</span>
</div>

<div class="clearable-input">
  <input type="text" value="Clear this." />
  <span data-clear-input>&times;</span>
</div>

विकल्प 2 - मैदान पर मँडराते समय केवल 'x' प्रदर्शित करें: (यहाँ उदाहरण)

Array.prototype.forEach.call(document.querySelectorAll('.clearable-input>[data-clear-input]'), function(el) {
  el.addEventListener('click', function(e) {
    e.target.previousElementSibling.value = '';
  });
});

.clearable-input {
  position: relative;
  display: inline-block;
}
.clearable-input > input {
  padding-right: 1.4em;
}
.clearable-input:hover > [data-clear-input] {
  display: block;
}
.clearable-input > [data-clear-input] {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  font-weight: bold;
  font-size: 1.4em;
  padding: 0 0.2em;
  line-height: 1em;
  cursor: pointer;
}
.clearable-input > input::-ms-clear {
  display: none;
}

<p>Only display the 'x' when hovering over the field:</p>

<div class="clearable-input">
  <input type="text" />
  <span data-clear-input>&times;</span>
</div>

<div class="clearable-input">
  <input type="text" value="Clear this." />
  <span data-clear-input>&times;</span>
</div>

विकल्प 3 - यदि inputतत्व का मान है तो केवल 'x' प्रदर्शित करें : (उदाहरण के लिए)

Array.prototype.forEach.call(document.querySelectorAll('.clearable-input'), function(el) {
  var input = el.querySelector('input');

  conditionallyHideClearIcon();
  input.addEventListener('input', conditionallyHideClearIcon);
  el.querySelector('[data-clear-input]').addEventListener('click', function(e) {
    input.value = '';
    conditionallyHideClearIcon();
  });

  function conditionallyHideClearIcon(e) {
    var target = (e && e.target) || input;
    target.nextElementSibling.style.display = target.value ? 'block' : 'none';
  }
});

.clearable-input {
  position: relative;
  display: inline-block;
}
.clearable-input > input {
  padding-right: 1.4em;
}
.clearable-input >[data-clear-input] {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  font-weight: bold;
  font-size: 1.4em;
  padding: 0 0.2em;
  line-height: 1em;
  cursor: pointer;
}
.clearable-input > input::-ms-clear {
  display: none;
}

<p>Only display the 'x' if the `input` element has a value:</p>

<div class="clearable-input">
  <input type="text" />
  <span data-clear-input>&times;</span>
</div>

<div class="clearable-input">
  <input type="text" value="Clear this." />
  <span data-clear-input>&times;</span>
</div>

Answer 6

चूँकि समाधानों में से कोई भी उड़ान वास्तव में हमारी आवश्यकताओं को पूरा नहीं करता है, हम jQuery-ClearSearch नामक एक सरल jQuery प्लगइन के साथ आए -

इसका उपयोग करना उतना ही आसान है:

<input class="clearable" type="text" placeholder="search">

<script type="text/javascript">
    $('.clearable').clearSearch();
</script>

उदाहरण: http://jsfiddle.net/wldaunfr/FERw3/

Comments

फ़ायरफ़ॉक्स 45 में काम करना

— जेफ़ डेविस

प्रतीत नहीं होता है नवीनतम Google Chrome में काम करना (v.70 ~ Nov 2018)

— बेन क्लार्क

Answer 7

संपादित करें: मुझे यह लिंक मिला। आशा करता हूँ की ये काम करेगा।http://viralpatel.net/blogs/2011/02/clearable-textbox-jquery.html

आपने उल्लेख किया है कि आप इसे इनपुट टेक्स्ट के दाईं ओर चाहते हैं। तो, सबसे अच्छा तरीका इनपुट बॉक्स के बगल में एक छवि बनाना होगा। यदि आप बॉक्स के अंदर कुछ देख रहे हैं, तो आप पृष्ठभूमि छवि का उपयोग कर सकते हैं, लेकिन आप बॉक्स को खाली करने के लिए स्क्रिप्ट लिखने में सक्षम नहीं हो सकते हैं।

इसलिए, टेक्स्ट बॉक्स को खाली करने के लिए एक जावास्क्रिप्ट कोड डालें और लिखें।

Comments

मैं इनपुट बॉक्स के दाईं ओर था, लेकिन इनपुट के अंदर, जैसे कि Google करता है

— Giovanni Di Milia

एक पृष्ठभूमि-छवि का उपयोग करें जो एक बटन की नकल करता है और निम्नलिखित कोड का उपयोग करता है<input type="text" name="Search" value="Search..." onclick="this.value='';">

— जैस्परो

यह वह नहीं है जो मैं करना चाहता हूं: मुझे एक आइकन चाहिए जो केवल तभी क्लिक करे जब इनपुट

— क्लियर हो जाए

Answer 8

यदि आप इसे Google की तरह चाहते हैं, तो आपको पता होना चाहिए कि "X" वास्तव में अंदर नहीं है <input>- वे बाहरी बॉक्स के साथ एक दूसरे के बगल में हैं जो टेक्स्ट बॉक्स की तरह दिखाई देते हैं।

HTML:

<form>
    <span class="x-input">
        <input type="text" class="x-input-text" />
        <input type="reset" />
    </span>
</form>

सीएसएस:

.x-input {
    border: 1px solid #ccc;
}

.x-input input.x-input-text {
    border: 0;
    outline: 0;
}

उदाहरण: http://jsfiddle.net/VTvNX/

Answer 9

कुछ इस तरह?? Jsfiddle डेमो

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    .searchinput{
    display:inline-block;vertical-align: bottom;
    width:30%;padding: 5px;padding-right:27px;border:1px solid #ccc;
        outline: none;
}
        .clearspace{width: 20px;display: inline-block;margin-left:-25px;
}
.clear {
    width: 20px;
    transition: max-width 0.3s;overflow: hidden;float: right;
    display: block;max-width: 0px;
}

.show {
    cursor: pointer;width: 20px;max-width:20px;
}
form{white-space: nowrap;}

    </style>
</head>
<body>
<form>
<input type="text" class="searchinput">
</form>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script> <script>
$(document).ready(function() {
$("input.searchinput").after('<span class="clearspace"><i class="clear" title="clear">&cross;</i></span>');
$("input.searchinput").on('keyup input',function(){
if ($(this).val()) {$(".clear").addClass("show");} else {$(".clear").removeClass("show");}
});
$('.clear').click(function(){
    $('input.searchinput').val('').focus();
    $(".clear").removeClass("show");
});
});
</script>
</body>
</html>

Answer 10

<form action="" method="get">
   <input type="text" name="search" required="required" placeholder="type here" />
   <input type="reset" value="" alt="clear" />
</form>

<style>
   input[type="text"]
   {
      height: 38px;
      font-size: 15pt;
   }

   input[type="text"]:invalid + input[type="reset"]{
     display: none;
   } 

   input[type="reset"]
   {
      background-image: url( http://png-5.findicons.com/files/icons/1150/tango/32/edit_clear.png );
      background-position: center center;
      background-repeat: no-repeat;
      height: 38px;
      width: 38px;
      border: none;
      background-color: transparent;
      cursor: pointer;
      position: relative;
      top: -9px;
      left: -44px;
   }
</style>

Answer 11

आप इस कमांड (बूटस्ट्रैप के बिना) के साथ कर सकते हैं।

Array.from(document.querySelectorAll('.search-field')).forEach(field => {
  field.querySelector('span').addEventListener('click', e => {
    field.querySelector('input').value = '';
  });
});

:root {
  --theme-color: teal;
}

.wrapper {
  width: 80%;
  margin: 0 auto;
}

div {
  position: relative;
}

input {
  background:none;
  outline:none;
  display: inline-block;
  width: 100%;
  margin: 8px 0;
  padding: 13px 15px;
  padding-right: 42.5px;
  border: 1px solid var(--theme-color);
  border-radius: 5px;
  box-sizing: border-box;
}

span {
  position: absolute;
  top: 0;
  right: 0;
  margin: 8px 0;
  padding: 13px 15px;
  color: var(--theme-color);
  font-weight: bold;
  cursor: pointer;
}
span:after {
  content: '\2716';
}

<div class="wrapper">
  <div class="search-field">
    <input placeholder="Search..." />
    <span></span>
  </div>
</div>

Answer 12

यहाँ एक jQuery प्लगइन (और अंत में एक डेमो) है।

http://jsfiddle.net/e4qhW/3/

मैंने ज्यादातर यह एक उदाहरण (और एक व्यक्तिगत चुनौती) को चित्रित करने के लिए किया। हालांकि उत्थान का स्वागत है, अन्य उत्तर अच्छी तरह से समय पर सौंपे जाते हैं और उनकी उचित मान्यता के लायक होते हैं।

फिर भी, मेरी राय में, यह ओवर-इंजीनियर ब्लोट है (जब तक कि यह यूआई लाइब्रेरी का हिस्सा नहीं बनता)।

Comments

यदि आप सामग्री को साफ़ करते हैं और फिर से टाइप करना शुरू करते हैं ... कोई और xबटन नहीं है

— रोको सी। बुल्जन

हाहा एक 2y पुराने बग की तरह दिखता है;) आपको अभी भी यहाँ देखने के लिए अच्छा है

— रोको सी। बुल्जन ऑक्टो

Answer 13

मैंने jQuery और बूटस्ट्रैप का उपयोग करते हुए एक सरल घटक लिखा है। इसे आज़माएं: https://github.com/mahpour/bootstrap-input-clear-button

Answer 14

एक jquery प्लगइन का उपयोग करके मैंने इसे अपनी आवश्यकताओं में अनुकूलित विकल्प जोड़कर और एक नया प्लगइन बनाने के लिए अनुकूलित किया है। आप इसे यहां पा सकते हैं: https://github.com/david-dlc-cerezo/jquery-clearField

एक साधारण उपयोग का एक उदाहरण:

<script src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js'></script>
<script src='src/jquery.clearField.js'></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="css/jquery.clearField.css">

<table>
    <tr>
        <td><input name="test1" id="test1" clas="test" type='text'></td>
        <td>Empty</td>
    </tr>
    <tr>
        <td><input name="test2" id="test2" clas="test" type='text' value='abc'></td>
        <td>Not empty</td>
    </tr>
</table>

<script>
    $('.test').clearField();
</script>

कुछ इस तरह से प्राप्त करना:

Answer 15

jQuery मोबाइल अब इस में बनाया गया है:

<input type="text" name="clear" id="clear-demo" value="" data-clear-btn="true">

Jquery मोबाइल एपीआई TextInput डॉक्स

Answer 16

CSS या छवि फ़ाइलों को शामिल करने की आवश्यकता नहीं है। उस पूरे भारी-तोपखाने jQuery UI पुस्तकालय को शामिल करने की आवश्यकता नहीं है। मैंने एक हल्का jQuery प्लगइन लिखा है जो आपके लिए जादू करता है। आप सभी की जरूरत है jQueryऔर प्लगइन है । =)

यहां फिडेल : jQuery InputSearch डेमो ।