ฉันจะใส่ปุ่มชัดเจนในช่องป้อนข้อความ HTML ได้อย่างที่ iPhone ทำอย่างไร

131

ฉันต้องการไอคอนเล็ก ๆ ที่น่าประทับใจเมื่อคลิกแล้วจะเป็นการลบข้อความในกล่อง <INPUT>

นี่เป็นการประหยัดพื้นที่แทนที่จะมีลิงค์ที่ชัดเจนด้านนอกของกล่องอินพุต

ทักษะ CSS ของฉันอ่อนแอ ... นี่คือ~~ภาพหน้าจอ~~ของลักษณะที่ iPhone ดู

93

@thebluefox สรุปทั้งหมดแล้ว คุณเพียงแค่บังคับให้ใช้ JavaScript เพื่อให้ปุ่มนั้นทำงานได้ นี่คือ SSCCE คุณสามารถคัดลอก 'n'paste'n'run ได้:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 2803532</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('input.deletable').wrap('<span class="deleteicon" />').after($('<span/>').click(function() {
                    $(this).prev('input').val('').trigger('change').focus();
                }));
            });
        </script>
        <style>
            span.deleteicon {
                position: relative;
            }
            span.deleteicon span {
                position: absolute;
                display: block;
                top: 5px;
                right: 0px;
                width: 16px;
                height: 16px;
                background: url('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4') 0 -690px;
                cursor: pointer;
            }
            span.deleteicon input {
                padding-right: 16px;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <input type="text" class="deletable">
    </body>
</html>

ตัวอย่างที่อาศัยอยู่ที่นี่

jQueryเป็นวิธีที่ไม่จำเป็นเพียงแค่แยกตรรกะที่จำเป็นสำหรับการเพิ่มประสิทธิภาพแบบก้าวหน้าจากซอร์สโค้ดแน่นอนคุณสามารถไปข้างหน้าด้วยHTML / CSS / JS ธรรมดาได้ :

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 2803532, with "plain" HTML/CSS/JS</title>
        <style>
            span.deleteicon {
                position: relative;
            }
            span.deleteicon span {
                position: absolute;
                display: block;
                top: 5px;
                right: 0px;
                width: 16px;
                height: 16px;
                background: url('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4') 0 -690px;
                cursor: pointer;
            }
            span.deleteicon input {
                padding-right: 16px;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <span class="deleteicon">
            <input type="text">
            <span onclick="var input = this.previousSibling; input.value = ''; input.focus();"></span>
        </span>
    </body>
</html>

คุณจะลงเอยด้วย HTML ที่น่าเกลียดยิ่งกว่าเดิม

ทราบว่าเมื่อ look'n'feel UI ไม่ได้เป็นกังวลมากที่สุดของคุณ แต่การทำงานจะแล้วเพียงแค่ใช้แทน<input type="search"> <input type="text">มันจะแสดงปุ่มล้าง (เฉพาะเบราว์เซอร์) บนเบราว์เซอร์ที่ใช้ HTML5 ได้

— BalusC
แหล่งที่มา

7

เป็นไปได้ที่จะทำให้ปุ่มล้างซ่อนอยู่เมื่อ textfield ว่างเปล่า?

— รูต

ใน IE9 ข้อความจะลอยอยู่ใต้ไอคอนกากบาท

— sedovav

เนื่องจากการเปลี่ยนแปลงชุดรูปแบบ URL ของรูปภาพไม่ถูกต้องอีกต่อไป ภาพเก่าสามารถเข้าถึงได้ที่web.archive.org/web/20150101025546/http://cdn.sstatic.net/…

— zacaj

1

นอกจากนี้คุณยังสามารถใช้ไอคอนตัวอักษรที่ยอดเยี่ยมกับclass="fa fa-remove"ในช่วงภายในเพื่อแสดงไอคอนข้ามที่ดี

— singe3

ฉันใช้ Javascript เวอร์ชันบริสุทธิ์และทำงานได้ดียกเว้นการวางปุ่มไว้ตรงกลางบน Win / Linux Firefox / Chrome ฉันแก้ไขได้โดยลบtop:ในส่วนขยายของเด็กและตั้งค่าdisplay: flex; align-items: center;ในช่วงพาเรนต์

— thomasa88

157

ทุกวันนี้ด้วย HTML5 มันค่อนข้างง่าย:

<input type="search" placeholder="Search..."/>

เบราว์เซอร์สมัยใหม่ส่วนใหญ่จะแสดงปุ่มล้างที่ใช้งานได้โดยอัตโนมัติตามค่าเริ่มต้น

(ถ้าคุณใช้ Bootstrap คุณจะต้องเพิ่มการแทนที่ลงในไฟล์ css ของคุณเพื่อให้มันแสดง)

input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}

เบราว์เซอร์ Safari / WebKit ยังสามารถให้คุณสมบัติพิเศษเมื่อใช้type="search"งานเช่นresults=5และautosave="..."แต่พวกเขายังแทนที่สไตล์ของคุณ (เช่นความสูงเส้นขอบ) เพื่อป้องกันการแทนที่เหล่านั้นในขณะที่ยังคงใช้งานได้เหมือนปุ่ม X คุณสามารถเพิ่มสิ่งนี้ลงใน css ของคุณ:

input[type=search] {
    -webkit-appearance: none;
}

ดูcss-tricks.com สำหรับข้อมูลเพิ่มเติมtype="search"เกี่ยวกับคุณลักษณะที่มีให้โดย

— นิค Sweeting
แหล่งที่มา

3

คำตอบที่ยอดเยี่ยมไม่มีรหัสที่เกี่ยวข้อง แต่น่าเสียดายที่ไม่ได้รับการสนับสนุนจากเบราว์เซอร์มากมาย .. ไม่เป็นไรจะเป็นคุณลักษณะเพิ่มเติม Chrome ในผลิตภัณฑ์ของฉัน :)

— guillaumepotier

49

HTML5 แนะนำประเภทการป้อนข้อมูล 'ค้นหา' ที่ฉันเชื่อว่าทำในสิ่งที่คุณต้องการ

<input type="search" />

นี่เป็นตัวอย่างที่มีชีวิต

— ThorSummoner
แหล่งที่มา

4

แม้ว่าเบราว์เซอร์รุ่นล่าสุดจะรองรับประเภท 'ค้นหา' (ตรวจสอบการสนับสนุนได้ที่นี่: wufoo.com/html5) ปุ่มล้างจะไม่ปรากฏใน Firefox (32.0.3) หรือ Opera (12.17)

— justanotherprogrammer

9

ปุ่มล้างจะไม่ปรากฏใน Chrome ล่าสุดเช่นกัน

— tsayen

3

หากคุณใช้ Bootstrap มันอาจจะแทนที่พฤติกรรมเริ่มต้น

— aexl

CodePen ที่เชื่อมโยงขาดสแลชปิดในอินพุตดังนั้นหากคุณต้องการดูว่ามันทำงานกับ CodePen เพียงแค่เพิ่มสแลชปิด

— Gen1-1

@ Gen1-1 ดูเหมือนว่าการอัปโหลดแบบสาธารณะจะปิดใช้งานblog.codepen.io/2019/08/06/anonymous-pen-save-option-removed ถ้าใครมีปากการหัสคงที่โปรดแก้ไขและช่วยแก้ไขให้ถูกต้อง ตัวอย่าง

— ThorSummoner

24

ตรวจสอบปลั๊กอินjQuery-ClearSearch ของเรา มันเป็นปลั๊กอิน jQuery ที่สามารถกำหนดค่าได้ - ปรับให้เหมาะกับความต้องการของคุณโดยการใส่สไตล์ฟิลด์อินพุตให้ตรงไปตรงมา เพียงใช้มันดังต่อไปนี้:

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

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

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

— wldaunfr
แหล่งที่มา

มันยอดเยี่ยม แต่ฉันจะแนะนำให้เพิ่มใน "$ (หน้าต่าง) .resize (function () {triggerBtn ()});" ใน jquery.clearsearch.js เพียงแค่ $ this.on ('keyup keydown change focus', triggerBtn); | ดังนั้นการปรับขนาดหน้าต่างจะไม่ทำให้ตำแหน่งกากบาทยุ่งเหยิง

— อึ้งเซกลอง

17

คุณไม่สามารถวางมันลงในกล่องข้อความได้ แต่ทำให้มันดูเหมือนมันอยู่ข้างในซึ่งน่าเสียดายที่ต้องมี CSS: P

ทฤษฎีห่อหุ้มอินพุตใน div นำเส้นขอบและพื้นหลังออกจากอินพุตจากนั้นจัดสไตล์ div ขึ้นให้มีลักษณะเหมือนกล่อง จากนั้นปล่อยปุ่มของคุณหลังจากช่องป้อนข้อมูลในรหัสและงานดี '

เมื่อคุณได้มันไปทำงาน;)

— ทอม
แหล่งที่มา

6

ฉันมีทางออกที่สร้างสรรค์ฉันคิดว่าคุณกำลังมองหา

$('#clear').click(function() {
  $('#input-outer input').val('');
});

body {
  font-family: "Tahoma";
}
#input-outer {
  height: 2em;
  width: 15em;
  border: 1px #e7e7e7 solid;
  border-radius: 20px;
}
#input-outer input {
  height: 2em;
  width: 80%;
  border: 0px;
  outline: none;
  margin: 0 0 0 10px;
  border-radius: 20px;
  color: #666;
}
#clear {
  position: relative;
  float: right;
  height: 20px;
  width: 20px;
  top: 5px;
  right: 5px;
  border-radius: 20px;
  background: #f1f1f1;
  color: white;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}
#clear:hover {
  background: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-outer">
  <input type="text">
  <div id="clear">
    X
  </div>
</div>

ขยายตัวอย่างข้อมูล

https://jsfiddle.net/qdesign/xn9eogmx/1/

— Mahmoud Ali Kassem
แหล่งที่มา

3

<input type="search" />แน่นอนวิธีที่ดีที่สุดคือการใช้ที่เคยได้รับการสนับสนุนมากขึ้น

อย่างไรก็ตามการเขียนโค้ดสนุกฉันคิดว่ามันสามารถทำได้โดยใช้ปุ่มรีเซ็ตของแบบฟอร์มและนี่คือผลการทำงาน (มันคุ้มค่ากับการแจ้งเตือนที่ไม่สามารถใช้อินพุตอื่นได้ แต่ฟิลด์ค้นหาด้วยวิธีนี้หรือปุ่มรีเซ็ตจะลบ พวกเขาด้วย) ไม่จำเป็นต้องมีจาวาสคริปต์:

form > div{
    position: relative;
    width: 200px;
}

form [type="text"] {
    width: 100%;
    padding-right: 20px;
}

form [type="reset"] {
    position: absolute;
    border: none;
    display: block;
    width: 16px;
    border-radius: 20px;
    top: 2px;
    bottom: 2px;
    right: -20px;
    background-color: #ddd;
    padding: 0px;
    margin: 0px;
}

<form>
	<div>
		<input type="text" />
		<input type="reset" value="X" />
	</div>
</form>

ขยายตัวอย่างข้อมูล

— TechNyquist
แหล่งที่มา

1

บางทีวิธีง่ายๆนี้สามารถช่วย:

<input type="text" id="myInput" value="No War"/><button onclick="document.getElementById('myInput').value = ''" title="Clear">X</button></input>

ขยายตัวอย่างข้อมูล

— Mehran Shagerdi
แหล่งที่มา

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

— E. Zeytinci

-1

@Mahmoud Ali Kaseem

ฉันเพิ่งเปลี่ยน CSS เพื่อให้มันดูแตกต่างและเพิ่มการโฟกัส ();

https://jsfiddle.net/xn9eogmx/81/

$('#clear').click(function() {
  $('#input-outer input').val('');
  $('#input-outer input').focus();
});

body {
  font-family: "Arial";
  font-size: 14px;
}
#input-outer {
  height: 2em;
  width: 15em;
  border: 1px #777 solid;
  position: relative;
  padding: 0px;
  border-radius: 4px;
}
#input-outer input {
  height: 100%;
  width: 100%;
  border: 0px;
  outline: none;
  margin: 0 0 0 0px;
  color: #666;
  box-sizing: border-box;
  padding: 5px;
  padding-right: 35px;
  border-radius: 4px;
}
#clear {
  position: absolute;
  float: right;
  height: 2em;
  width: 2em;
  top: 0px;
  right: 0px;
  background: #aaa;
  color: white;
  text-align: center;
  cursor: pointer;
  border-radius: 0px 4px 4px 0px;
}
#clear:after {
  content: "\274c";
  position: absolute;
  top: 4px;
  right: 7px;
}
#clear:hover,
#clear:focus {
  background: #888;
}
#clear:active {
  background: #666;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-outer">
  <input type="text">
  <div id="clear"></div>
</div>

ขยายตัวอย่างข้อมูล

— Hiren
แหล่งที่มา