मैं अपने HTML टेक्स्ट इनपुट बॉक्स के अंदर एक स्पष्ट बटन कैसे लगा सकता हूं जैसे कि iPhone करता है?

131

मैं एक अच्छा सा आइकन चाहता हूं, जिसे क्लिक करने पर <INPUT> बॉक्स में टेक्स्ट क्लियर हो जाएगा।

यह इनपुट बॉक्स के बाहर स्पष्ट लिंक होने के बजाय अंतरिक्ष को बचाने के लिए है।

मेरी सीएसएस कौशल कमजोर हैं ... यहाँ एक ~~स्क्रीनशॉट~~ फोटो है कि आईफोन कैसे दिखता है।

93

@thebluefox ने सभी को सबसे अधिक संक्षेप में प्रस्तुत किया है। वैसे भी काम करने के लिए आप केवल जावास्क्रिप्ट का उपयोग करने के लिए मजबूर हैं। यहाँ एक SSCCE है, आप इसे कॉपी कर सकते हैं 't'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 (और गैर-क्रॉसब्रोसर संगत JS;) के साथ समाप्त होते हैं।

ध्यान दें कि जब UI दिखता है, तो आपकी सबसे बड़ी चिंता नहीं है, लेकिन कार्यक्षमता है, तो <input type="search">इसके बजाय बस का उपयोग करें <input type="text">। यह HTML5 सक्षम ब्राउज़रों पर ब्राउज़र (ब्राउज़र-विशिष्ट) स्पष्ट बटन दिखाएगा।

— BalusC
स्रोत

7

पाठ फ़ील्ड खाली होने पर स्पष्ट बटन को छिपाना संभव है?

— मूल

IE9 में पाठ क्रॉस आइकन के नीचे तैरता है।

— सेडोवव

विषय बदलने के बाद से, छवि के लिए url अब सही नहीं है। पुरानी छवि web.archive.org/web/20150101025546/http://cdn.sstatic.net/…

— zacaj

1

आप class="fa fa-remove"एक बढ़िया क्रॉस आइकन प्रदर्शित करने के लिए आंतरिक स्पैन के साथ फ़ॉन्ट-विस्मयकारी आइकन का उपयोग भी कर सकते हैं

— singe3

मैंने शुद्ध जावास्क्रिप्ट संस्करण का उपयोग किया और विन / लिनक्स फ़ायरफ़ॉक्स / क्रोम पर बटन को छोड़कर, इसने अच्छी तरह से काम किया। मैंने हल किया कि top:बच्चे की अवधि में हटाकर और display: flex; align-items: center;माता-पिता की अवधि में सेटिंग करें ।

— thomasa88

157

आजकल HTML5 के साथ, यह बहुत आसान है:

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

अधिकांश आधुनिक ब्राउज़र स्वचालित रूप से डिफ़ॉल्ट रूप से क्षेत्र में प्रयोग करने योग्य स्पष्ट बटन को प्रस्तुत करेंगे।

(यदि आप बूटस्ट्रैप का उपयोग करते हैं, तो आपको इसे दिखाने के लिए अपनी सीएसएस फ़ाइल में एक ओवरराइड जोड़ना होगा)

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

Safari / WebKit ब्राउज़र उपयोग करते समय type="search", जैसे results=5और autosave="...", अतिरिक्त सुविधाएँ प्रदान कर सकते हैं , लेकिन वे आपकी कई शैलियों (जैसे ऊंचाई, सीमाएँ) को भी ओवरराइड करते हैं। उन ओवरराइड्स को रोकने के लिए, एक्स बटन जैसी कार्यक्षमता को बनाए रखते हुए, आप इसे अपने सीएसएस में जोड़ सकते हैं:

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

द्वारा दी गई सुविधाओं के बारे में अधिक जानकारी के लिए css-tricks.com देखें type="search"।

— निक मीठा
स्रोत

3

उत्कृष्ट उत्तर, कोई कोड शामिल नहीं है। दुर्भाग्य से कई ब्राउज़रों द्वारा समर्थित नहीं है .. कोई बात नहीं, मेरे उत्पाद में एक क्रोम अतिरिक्त सुविधा होगी :)

— guillaumepotier

48

HTML5 'खोज' इनपुट प्रकार का परिचय देता है जो मुझे विश्वास है कि आप जो चाहते हैं वह करता है।

<input type="search" />

यहाँ एक जीवंत उदाहरण है ।

— ThorSummoner
स्रोत

4

हालाँकि 'खोज' प्रकार सभी हालिया ब्राउज़रों (यहाँ समर्थन की जाँच करें: wufoo.com/html5) द्वारा समर्थित है, स्पष्ट बटन फ़ायरफ़ॉक्स (32.0.3) या ओपेरा (12.17) में नहीं दिखाया गया है।

— justanotherprogrammer 14

9

स्पष्ट क्रोम को नवीनतम क्रोम में भी नहीं दिखाया गया है

— tsayen

3

यदि आप बूटस्ट्रैप का उपयोग कर रहे हैं, तो यह डिफ़ॉल्ट व्यवहार को ओवरराइड

— aexl

लिंक किए गए कोडपैन इनपुट में बंद स्लैश को याद कर रहे हैं, इसलिए यदि आप इसे कोडपेन पर काम करना चाहते हैं, तो बस समापन स्लैश जोड़ें।

— 191 में Gen1-1

@ Gen1-1 ओह, ऐसा लगता है कि सार्वजनिक अपलोड अक्षम हैं blog.codepen.io/2019/08/06/anonymous-pen-save-option-removed यदि किसी के पास एक निश्चित कोड पेन है, तो कृपया उसे संपादित करने और सही मदद करने के लिए स्वतंत्र महसूस करें डेमो

— थोरसुमोनर

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 (फंक्शन () {ट्रिगरबटन ())"; in jquery.clearsearch.js, बस इस $ के बाद। ('की-की-डाउन चेंज फ़ोकस', ट्रिगरबर्न); | ताकि आकार बदलने वाली खिड़कियां क्रॉस पोजीशन को गड़बड़ न करें

— Ng Sek Long

17

आप वास्तव में इसे दुर्भाग्य से पाठ बॉक्स के अंदर नहीं डाल सकते हैं, केवल इसे इसके अंदर की तरह दिखते हैं, जिसका दुर्भाग्य से मतलब है कि कुछ सीएसएस की आवश्यकता है: पी।

थ्योरी एक डिव में इनपुट लपेटती है, इनपुट से सभी बॉर्डर और बैकग्राउंड को लेती है, फिर डिव को बॉक्स की तरह दिखने के लिए स्टाइल करती है। फिर, कोड में इनपुट बॉक्स और नौकरियों के बाद अपने बटन को छोड़ दें।

एक बार जब आप इसे वैसे भी काम करने के लिए मिल गया;

— टॉम
स्रोत

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/

— महमूद अली कासेम
स्रोत

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>

स्निपेट का विस्तार करें

— मेहरान शागर्दी
स्रोत

हालांकि यह कोड ओपी की समस्या का समाधान प्रदान कर सकता है, लेकिन यह अत्यधिक अनुशंसा की जाती है कि आप इस कोड को प्रश्न का उत्तर क्यों और / या कैसे प्रदान करते हैं। कोड केवल उत्तर आमतौर पर लंबे समय में बेकार हो जाते हैं क्योंकि भविष्य के दर्शकों को इसी तरह की समस्याओं का सामना करना पड़ता है जो समाधान के पीछे के तर्क को समझ नहीं सकते हैं।

— ई। ज़ेतिजिन

-1

@ महमूद अली कसीम

मैंने कुछ सीएसएस को बदल दिया है ताकि इसे अलग और जोड़ा गया फोकस () दिखाई दे;

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>

स्निपेट का विस्तार करें

— हिरेन
स्रोत