ไอคอนชัดเจนภายในข้อความที่ป้อน

มีวิธีที่รวดเร็วในการสร้างองค์ประกอบข้อความที่มีไอคอนด้านขวาเพื่อล้างองค์ประกอบการป้อนข้อมูลตัวเอง (เช่นช่องค้นหา google)?

ฉันมองไปรอบ ๆ แต่ฉันพบวิธีใส่ไอคอนเป็นพื้นหลังขององค์ประกอบอินพุตเท่านั้น มีปลั๊กอิน jQuery หรืออย่างอื่นหรือไม่?

ฉันต้องการไอคอนภายในองค์ประกอบข้อความที่ป้อนเช่น:

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

เพิ่ม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>

ใช้เพียง a <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=

ฉันขอแนะนำได้ไหมถ้าคุณโอเคกับการถูก จำกัด เฉพาะเบราว์เซอร์ที่ใช้ HTML 5 เพียงใช้:

<input type="search" />

การสาธิต JS Fiddle

เป็นที่ยอมรับใน Chromium (Ubuntu 11.04) สิ่งนี้ต้องการให้มีข้อความอยู่ภายในinputองค์ประกอบก่อนที่ภาพ / ฟังก์ชั่นข้อความที่ชัดเจนจะปรากฏขึ้น

อ้างอิง:

• ดำน้ำใน HTML 5: รูปแบบของความบ้า
• ประเภทการป้อนข้อมูล = ค้นหา - ช่องค้นหา (NEW) HTML5

คุณสามารถใช้ปุ่มรีเซ็ตสไตล์กับภาพ ...

<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

ฉันได้สร้างกล่องข้อความที่ชัดเจนในเพียง CSS มันไม่ต้องใช้รหัสจาวาสคริปต์ในการทำงาน

ด้านล่างคือลิงค์สาธิต

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

ตาม MDN , <input type="search" />ได้รับการสนับสนุนในขณะนี้ในเบราว์เซอร์ที่ทันสมัยทั้งหมด:

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

อย่างไรก็ตามหากคุณต้องการพฤติกรรมที่แตกต่างที่สอดคล้องกันในเบราว์เซอร์ที่นี่เป็นทางเลือกที่มีน้ำหนักเบาบางอย่างเท่านั้นที่ต้องใช้ JavaScript:

ตัวเลือก 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 - แสดง 'x' เฉพาะเมื่อinputองค์ประกอบมีค่า: (ตัวอย่างที่นี่)

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>

เนื่องจากไม่มีวิธีแก้ไขปัญหาที่ตรงตามความต้องการของเราเราจึงมีปลั๊กอินjQuery ที่เรียกว่าjQuery-ClearSearch -

ใช้มันง่ายเหมือน:

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

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

ตัวอย่าง: http://jsfiddle.net/wldaunfr/FERw3/

แก้ไข:ฉันพบลิงค์นี้ หวังว่ามันจะช่วย http://viralpatel.net/blogs/2011/02/clearable-textbox-jquery.html

คุณพูดถึงสิ่งที่คุณต้องการทางด้านขวาของข้อความป้อนเข้า ดังนั้นวิธีที่ดีที่สุดคือการสร้างภาพถัดจากกล่องอินพุต หากคุณกำลังมองหาบางอย่างภายในกล่องคุณสามารถใช้ภาพพื้นหลัง แต่คุณอาจไม่สามารถเขียนสคริปต์เพื่อล้างกล่อง

ดังนั้นการแทรกและรูปภาพและเขียนรหัส JavaScript เพื่อล้างกล่องข้อความ

หากคุณต้องการมันเหมือน Google คุณควรรู้ว่า "X" ไม่ได้อยู่ข้างใน<input>- พวกมันอยู่ติดกันโดยมีคอนเทนเนอร์ด้านนอกที่มีสไตล์เพื่อให้ดูเหมือนกับกล่องข้อความ

HTML:

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

CSS:

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

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

ตัวอย่าง: http://jsfiddle.net/VTvNX/

อะไรแบบนี้ ?? การสาธิต 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>

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

คุณสามารถทำได้ด้วยคำสั่งนี้ (โดยไม่ต้อง Bootstrap)

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>

นี่คือปลั๊กอิน jQuery (และตัวอย่างในตอนท้าย)

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

ฉันทำมันส่วนใหญ่เพื่อแสดงตัวอย่าง (และความท้าทายส่วนตัว) แม้ว่าอัพอัปจะได้รับการต้อนรับ แต่คำตอบอื่น ๆ ก็ถูกส่งตรงเวลาและสมควรได้รับการยอมรับ

ถึงกระนั้นในความคิดของฉันมันเป็น bloat เกินออกแบบ (เว้นแต่มันจะทำให้ส่วนหนึ่งของห้องสมุด UI)

ฉันเขียนส่วนประกอบง่าย ๆ โดยใช้ jQuery และ bootstrap ลองดูสิ: https://github.com/mahpour/bootstrap-input-clear-button

ใช้ jquery plugin ฉันปรับให้เข้ากับความต้องการของฉันเพิ่มตัวเลือกที่กำหนดเองและสร้างปลั๊กอินใหม่ คุณสามารถค้นหาได้ที่นี่: 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>

ได้รับสิ่งนี้:

jQuery Mobile ตอนนี้มีสิ่งนี้ภายใน:

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

TextInput API ของ Jquery Mobile API

ไม่จำเป็นต้องรวมไฟล์ CSS หรือไฟล์รูปภาพ ไม่จำเป็นต้องรวมไลบรารี jQuery UI ที่มีปืนใหญ่จำนวนมาก ฉันเขียนปลั๊กอิน jQuery ที่มีน้ำหนักเบาซึ่งทำเวทมนต์ให้คุณ ทั้งหมดที่คุณต้องjQueryและปลั๊กอิน =)

ซอนี่: jQuery InputSearch สาธิต