ইনপুট পাঠ্যের ভিতরে আইকন সাফ করুন

184

ইনপুট উপাদানটি (গুগল অনুসন্ধান বাক্সের মতো) সাফ করার জন্য ডানদিকে একটি আইকন সহ একটি ইনপুট পাঠ্য উপাদান তৈরি করার কোনও দ্রুত উপায় আছে?

আমি চারপাশে তাকালাম তবে আমি কেবলমাত্র কীভাবে ইনপুট উপাদানটির ব্যাকগ্রাউন্ড হিসাবে একটি আইকন রাখব তা খুঁজে পেয়েছি। এখানে কি জিকুয়ারি প্লাগইন বা অন্য কিছু আছে?

আমি ইনপুট পাঠ্য উপাদানের ভিতরে আইকনটি চাই, এরকম কিছু:

--------------------------------------------------
|                                               X|
--------------------------------------------------
javascript  jquery  html  css 
— জিওভান্নি দি মিলিয়া
সূত্র
3
একটি ইনপুট বাক্সে কোনও চিত্র স্থাপনের জন্য একটি jQuery প্লাগইন? আমি কি কিছু মিস করছি নাকি ?!
— খ্রিস্টান
1
@ ক্রিশ্চিয়ান সায়বারাস আপনি যে উত্তরটি বেছে নিয়েছেন তা থেকে আপনি দেখতে পাচ্ছেন, এটি একটি জেকারি প্লাগইন হতে পারে ...
— জিওভান্নি মিলিয়া
1
প্লেইন সতর্কতা বাক্সগুলি দেখানোর জন্য আপনার কাছে jQuery প্লাগইন থাকতে পারে। এর অর্থ এই নয় যে আপনাকে সত্যই করতে হবে এবং বেশিরভাগ ক্ষেত্রে এটি অতিরিক্ত ইঞ্জিনিয়ারযুক্ত ব্লাট । ওহ এবং যাইহোক, আপনি যা নির্বাচন করেছেন তা কোনও jQuery প্লাগইন নয় , তবে জাভাস্ক্রিপ্ট, এইচটিএমএল এবং সিএসএসের মিশ্রণ। একটি প্লাগইন প্রাসঙ্গিক বিশদ সহ jQuery স্বাক্ষর সহ একটি ফাইল / স্ক্রিপ্ট হবে।
— খ্রিস্টান
1
@ ক্রিশ্চিয়ান সায়বারাস: আমি jQuery প্লাগইন এবং জাভাস্ক্রিপ্ট এবং CSS এর মিশ্রণের মধ্যে পার্থক্য করতে পারি can আমি যা বলছিলাম তা হ'ল আপনি যদি কিছু ভাল করতে চান তবে আপনি কেবল একটি ইনপুট বাক্সে একটি চিত্র রাখতে পারবেন না।
— জিওভান্নি দি মিলিয়া
এই সমস্যাটির সন্ধানকারী লোকদের পাশাপাশি এই তথ্যেরও প্রয়োজন হবে: আপনি কীভাবে একটি "অনুসন্ধান" এইচটিএমএল 5 ইনপুট সাফ করবেন?
— brasofilo

উত্তর:

342

type="search"আপনার ইনপুটটিতে একটি যুক্ত করুন
সমর্থনটি বেশ শালীন তবে আইই <10 তে কাজ করবে না

<input type="search">
স্নিপেট প্রসারিত করুন

পুরানো ব্রাউজারগুলির জন্য সাবলীল ইনপুট

আপনার যদি আই 9 সমর্থন প্রয়োজন এখানে কিছু কর্মক্ষেত্র রয়েছে

একটি স্ট্যান্ডার্ড <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 প্যাডিং আইকনের নীচে পাঠ্য আড়াল করা (দৃশ্যমান অবস্থায়) প্রতিরোধ করবে।
জিকিউ ক্লাস যুক্ত করবে x(যদি inputমান থাকে) পরিষ্কার আইকন দেখায়।
এখন আমাদের কেবল জেকিউ দিয়ে ক্লাসের ইনপুটগুলি টার্গেট করা xএবং mousemoveমাউস সেই 18px "x" অঞ্চলের ভিতরে রয়েছে কিনা তা সনাক্ত করা ; ভিতরে থাকলে ক্লাস যুক্ত করুন onX। ক্লাসে
ক্লিক করা সমস্ত onXক্লাস সরিয়ে দেয়, ইনপুট মানটি পুনরায় সেট করে এবং আইকনটি আড়াল করে।

7x7px জিআইএফ: সাফ আইকন 7x7

বেস 64 স্ট্রিং:

data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=
— রোকো সি বুলজান
সূত্র
5
আমি একটি ট্যাগ ক্লাউড জেনারেটর তৈরি করার জন্য এই কোডের কিছু ধারণাগুলি ধার করার স্বাধীনতা নিয়েছি (খাঁটি সিএসএস ট্যাগ এবং আপভোট এবং ডাউনভোট বোতাম সহ)। আমি আশা করি এটি আপনার ব্রাউজারে ঠিক আছে; এটি jsfiddle.net/7PnKS
— mrBorna
1
বাহ, সত্যিই দুর্দান্ত সমাধান। আমি এটিই সন্ধান করছি। ধন্যবাদ. তবে, আমি কীভাবে বুটস্ট্র্যাপ 3 গ্লাইফিকন ব্যবহার করে "এক্স" চিত্রটি পরিবর্তন করতে পারি? কারণ গ্লাইফিকন হরফ হ'ল এটি জুম আউট করার সময় এটি আরও ভাল প্রদর্শিত হয়।
— ব্যবহারকারী 1995781
1
দুর্দান্ত, তবে ব্যাকগ্রাউন্ডের চিত্রটি অন্য সিএসএসের সাথে সংঘর্ষ করতে পারে। Wldaunfr এর নীচের উত্তরটি একটি ঝরঝরে jQuery প্লাগ-ইন বোঝায়: plugins.jquery.com/clears Search
— নিক ওয়েস্টগেট
1
সর্বশেষতম ফায়ারফক্স এবং ক্রোমে আমার জন্য দুর্দান্তভাবে কাজ করে। তবে এটি আইওএস এ কাজ করতে পরিবর্তন .on('touchstart click', '.onX', ...করতে .on('touchstart click', '.onX, .x', ...হয়েছিল।
— kritzikratzi
1
@ রোকোসি.বুলজান আমি ঠিক আবার পরীক্ষা করেছি এবং এখানে আমার অনুসন্ধানগুলি 1) ইনপুট পাঠ্য বাক্সে কয়েকটি অক্ষর ইনপুট করুন 2) 'এক্স' আইকনটি উপস্থিত 3) চেষ্টা করুন 'এক্স' আইকনে ক্লিক করুন তবে পাঠ্য পাঠ্যটি পরিষ্কার হয়ে যায় না। দ্রষ্টব্য: এই সময়ে, আইফোন কীবোর্ড এখনও সক্রিয় এবং লুকানো নেই। ৪) আমি কীবোর্ডটি আড়াল করার জন্য যদি "সম্পন্ন" বোতামটি ক্লিক করি এবং তারপরে 'এক্স' আইকনে ক্লিক করি, পাঠ্যটি এখনই সঠিকভাবে সাফ হবে। দেখে মনে হচ্ছে আইফোন কীবোর্ড প্রদর্শিত হলে আমি 'এক্স' দিয়ে পাঠ্য সাফ করতে অক্ষম।
— Withhelds
61

আমি কি পরামর্শ দিতে পারি, যদি আপনি এইচটিএমএল 5 কমপ্লায়েন্ট ব্রাউজারগুলিতে সীমাবদ্ধ থাকেন ঠিকঠাক ব্যবহার করে:

<input type="search" />

জেএস ফিডল ডেমো

স্বীকার করা যায়, ক্রোমিয়ামে (উবুন্টু ১১.০৪), পরিষ্কার-টেক্সট চিত্র / কার্যকারিতা উপস্থিত হওয়ার আগে এই inputউপাদানটির ভিতরে পাঠ্য থাকা দরকার।

রেফারেন্স:

— ডেভিড বলছেন মনিকা পুনরুদ্ধার করুন
সূত্র
11
অন্যান্য বিকাশকারীদের সহায়তা: আপনি যদি বুটস্ট্র্যাপ সিএসএস প্ল্যাটফর্ম ব্যবহার করেন তবে স্টাইল সরান "-ওয়েবেকিট-উপস্থিতি: পাঠ্যক্ষেত্র;" বুটস্ট্র্যাপ.সিএসএস ইনপুট [টাইপ = "অনুসন্ধান"] {-উইবকিট-বক্স-সাইজিং: সামগ্রী-বাক্স; -মোজ-বাক্স-সাইজিং: সামগ্রী-বাক্স; বক্স-আকার: কন্টেন্ট-বক্স; -ওয়েবেকিট-উপস্থিতি: পাঠ্যক্ষেত্র; }
— রিকার্ডো বাসিলিচি
1
এক্স এর রঙ পরিবর্তন করার কোনও উপায় আছে?
— রোটেরক্জ
1
@ রিকার্ডোবাসিলিচি কি আমার সিএসএস ফাইলটি প্রসারিত করার একটি উপায় আছে যাতে আমাকে মূল বুটস্ট্র্যাপ সিএসএস সম্পাদনা করতে হবে না এবং এখনও এই কাজটি করাতে হবে?
— সুপারসান
আমার মনে হয় না! তবে আমি সিএসএস উইজার্ড নই! :-(
— রিকার্ডো বাসিলিচি
2
দুর্ভাগ্যক্রমে এটি ফায়ারফক্স সমর্থন করে না, দেখুন: বিকাশকারী.মোজিলা.আর.ইন.ইউএস
— ডকস / ওয়েবে / সিএসএস/…
27

আপনি একটি চিত্র সহ স্টাইলযুক্ত রিসেট বোতামটি ব্যবহার করতে পারেন ...

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

— Kogi
সূত্র
10
এই রিসেট পুরো ফর্ম একজন নয়, বরং ক্ষেত্র
— konung
ইনপুট ফাঁকা থাকলে কীভাবে রিসেট চিত্রটি গোপন করবেন? আপনি, কোজি একটি সরাসরি উদাহরণ দিতে পারেন?
— হ্যারি
24

আমি কেবল সিএসএসে একটি ক্লিয়ারযোগ্য পাঠ্যবাক্স তৈরি করেছি। এটি কার্যকর করতে কোনও জাভাস্ক্রিপ্ট কোডের প্রয়োজন নেই

নীচে ডেমো লিঙ্কটি রয়েছে

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

— Shidhin Cr
সূত্র
1
অসাধারণ! ব্রাউজার সমর্থন সম্পর্কে কিছু তথ্য সহায়ক হবে।
— ইয়ান নিউজন
1
এটি আজ আমার জন্য এফএফ 27.0.1 এ ভাঙ্গা।
— নিক ওয়েস্টগেট
3
'এক্স' বোতামটির জন্য জায়গা তৈরি করতে পাঠ্যটি পুনরায় স্থান দেওয়া হচ্ছে না। আপনি বোতামটির পিছনে পাঠ্যটি দেখতে পাচ্ছেন না।
— ক্রিমসন ক্রিস
এটি এখনও কেবল একটি ক্ষেত্র নয়, পুরো ফর্ম সাফ করে।
— এরিক ভ্যাল্যান্ড
23

MDN মতে , <input type="search" />বর্তমানে সব আধুনিক ব্রাউজারে সমর্থিত হয়:

ইনপুট প্রকার = অনুসন্ধান

<input type="search" value="Clear this." />
স্নিপেট প্রসারিত করুন

তবে, আপনি যদি ব্রাউজারগুলির জুড়ে সামঞ্জস্যপূর্ণ ভিন্ন আচরণ চান তবে এখানে কিছু হালকা ওজনের বিকল্প রয়েছে যা কেবল জাভাস্ক্রিপ্টের প্রয়োজন:

বিকল্প 1 - সর্বদা 'এক্স' প্রদর্শন করুন: (উদাহরণস্বরূপ এখানে)

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 - ক্ষেত্রের উপর ঘোরাঘুরি করার সময় কেবল 'এক্স' প্রদর্শন করুন: (উদাহরণস্বরূপ)

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>
স্নিপেট প্রসারিত করুন

— জোশ ক্রোজিয়ার
সূত্র
9

যেহেতু আশেপাশে উড়ন্ত সমাধানগুলির কোনওটিই আমাদের প্রয়োজনীয়তাগুলি পূরণ করে নি, তাই আমরা jQuery-ClearSearch নামে একটি সাধারণ jQuery প্লাগইন নিয়ে এসেছি -

এটি ব্যবহার করা যেমন সহজ:

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

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

উদাহরণ: http://jsfiddle.net/wldaunfr/FERw3/

— wldaunfr
সূত্র
ফায়ারফক্স 45 এ কাজ করা
— জেফ ডেভিস
1
দেখে মনে হচ্ছে না সর্বশেষ গুগল ক্রোমে কাজ করা হচ্ছে (v.70 ~ নভেম্বর 2018)
— বেন ক্লার্ক
3

সম্পাদনা: আমি এই লিঙ্কটি খুঁজে পেয়েছি। আশা করি এটা সাহায্য করবে. http://viralpatel.net/blogs/2011/02/clearable-textbox-jquery.html

আপনি উল্লেখ করেছেন যে আপনি এটি ইনপুট পাঠ্যের ডানদিকে চান। সুতরাং, সবচেয়ে ভাল উপায় হ'ল ইনপুট বাক্সের পাশে একটি চিত্র তৈরি করা। আপনি যদি বাক্সের অভ্যন্তরে কিছু খুঁজছেন তবে আপনি ব্যাকগ্রাউন্ড চিত্র ব্যবহার করতে পারেন তবে বাক্সটি সাফ করার জন্য আপনি কোনও স্ক্রিপ্ট লিখতে সক্ষম নাও হতে পারেন।

সুতরাং, পাঠ্যবক্সটি সাফ করার জন্য একটি জাভাস্ক্রিপ্ট কোড প্রবেশ করুন এবং চিত্র লিখুন এবং লিখুন।

— Jaspero
সূত্র
আমি ইনপুট বাক্সের ডান দিকের অর্থ ছিল, তবে
— গুগলের
একটি ব্যাকগ্রাউন্ড-চিত্র ব্যবহার করুন যা একটি বোতামের নকল করে এবং নিম্নলিখিত কোডটি ব্যবহার করুন<input type="text" name="Search" value="Search..." onclick="this.value='';">
— জাস্পেরো
এটি আমি যা করতে চাই তা নয়: আমি এমন একটি আইকন চাই যা ক্লিক করলেই ইনপুট সাফ হয়ে যায় ....
— জিওভানি ডি মিলিয়া
3

আপনি যদি এটি গুগলের মতো চান তবে আপনার জানা উচিত যে "এক্স" আসলে এর ভিতরে নেই <input> - তারা টেক্সট বাক্সের মতো প্রদর্শিত বাইরের ধারক স্টাইলযুক্ত একে অপরের পাশে রয়েছে।

এইচটিএমএল:

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

— জোনাথন লোনভস্কি
সূত্র
1

এটার মতো কিছু?? জেসফিল্ড ডেমো

    <!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>
— ত্বকী
সূত্র
1 
<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>
— যুবরাজ সরকার
সূত্র
1

আপনি এই আদেশগুলি (বুটস্ট্র্যাপ ছাড়াই) দিয়ে করতে পারেন।

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>
স্নিপেট প্রসারিত করুন

— আন্দ্রেস এম জিমনেজ
সূত্র
0

এখানে একটি jQuery প্লাগইন রয়েছে (এবং শেষে একটি ডেমো)।

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

আমি এটি বেশিরভাগই উদাহরণ (এবং একটি ব্যক্তিগত চ্যালেঞ্জ) চিত্রিত করার জন্য করেছি। যদিও upvotes স্বাগত, অন্য উত্তরগুলি যথাসময়ে যথাযথভাবে হস্তান্তরিত হয় এবং তাদের যথাযথ স্বীকৃতি প্রাপ্য।

তবুও, আমার মতে এটি অতিরিক্ত ইঞ্জিনিয়ারড ব্লাট (যদি এটি কোনও ইউআই লাইব্রেরির অংশ না করে)।

— খ্রীষ্টান
সূত্র
আপনি যদি সামগ্রীটি সাফ করে আবার টাইপ শুরু করেন ... আর কোনও xবোতাম নেই
— রোকো সি বুলজান
হাহাহাহা দেখতে 2 বছরের পুরানো বাগের মতো দেখতে;) আপনাকে
— এখানের
0

একটি 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>

এরকম কিছু প্রাপ্তি:

এখানে চিত্র বর্ণনা লিখুন

— ডেভিড
সূত্র
0

সিএসএস বা চিত্র ফাইলগুলি অন্তর্ভুক্ত করার দরকার নেই। পুরো ভারী-আর্টিলারি jQuery UI লাইব্রেরি অন্তর্ভুক্ত করার দরকার নেই। আমি একটি হালকা jQuery প্লাগইন লিখেছিলাম যা আপনার জন্য যাদু করে। আপনার প্রয়োজন হয় jQueryএবং প্লাগইন । =)

jQuery ইনপুট অনুসন্ধানে উঁকি মেরে দেখুন

ফিডাল এখানে: jQuery ইনপুট অনুসন্ধান ডেমো ।

— গ্লেন মোহাম্মদ
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.