আইফোন যেমন করে আমার এইচটিএমএল পাঠ্য ইনপুট বাক্সের ভিতরে আমি কীভাবে একটি স্পষ্ট বোতামটি রেখে পারি?

131

আমি একটি সুন্দর ছোট আইকন রাখতে চাই যা ক্লিক করা হলে <INPUT> বাক্সের পাঠ্য সাফ হয়ে যায়।

এটি ইনপুট বাক্সের বাইরের একটি পরিষ্কার লিঙ্ক না রেখে স্থান বাঁচানো save

আমার সিএসএস দক্ষতা দুর্বল ... আইফোনটি কেমন দেখাচ্ছে তার একটি ~~স্ক্রিনশট~~ ফটো এখানে ।

93

@ থেবলিউফক্স সকলের সংক্ষিপ্তসার জানিয়েছে। যেভাবে যাইহোক, সেই বোতামটি তৈরি করতে আপনি কেবল জাভাস্ক্রিপ্ট ব্যবহার করতে বাধ্য হয়েছেন। এখানে একটি এসএসসিসিই রয়েছে, আপনি এটি অনুলিপি করতে পারবেন না:

<!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 কোনওভাবেই প্রয়োজনীয় নয়, এটি উত্স থেকে প্রগতিশীল বর্ধনের জন্য প্রয়োজনীয় যুক্তিটি খুব সুন্দরভাবে পৃথক করে, আপনি অবশ্যই সরল এইচটিএমএল / সিএসএস / জেএস নিয়েও এগিয়ে যেতে পারেন :

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

আপনি কেবল অদ্ভুত এইচটিএমএল (এবং নন-ক্রসব্রোজার সুসংগত জেএস;)) দিয়ে শেষ করেন।

মনে রাখবেন যে যখন ইউআই লুক'এনফিল আপনার সবচেয়ে বড় উদ্বেগ নয় তবে কার্যকারিতা তখন তার <input type="search">পরিবর্তে কেবল ব্যবহার করুন <input type="text">। এটি HTML5 সক্ষম ব্রাউজারগুলিতে (ব্রাউজার-নির্দিষ্ট) স্পষ্ট বোতামটি প্রদর্শন করবে।

— BalusC
সূত্র

7

পাঠ্যক্ষেত্রটি খালি থাকলে সাফ বোতামটি গোপন করা সম্ভব?

— মূল

আই 9 এ পাঠ্যটি ক্রস আইকনের নিচে ভাসমান।

— সেডোভাভ

থিম পরিবর্তন হওয়ার পরে, চিত্রটির ইউআরএল আর সঠিক নয়। পুরাতন চিত্রটির অ্যাক্সেস করা যেতে পারে web.archive.org/web/20150101025546/http://cdn.sstatic.net/...

— zacaj

1

আপনি class="fa fa-remove"একটি সুন্দর ক্রস আইকন প্রদর্শন করতে অভ্যন্তরীণ স্প্যান সহ ফন্ট-সন্ত্রস্ত আইকনগুলিও ব্যবহার করতে পারেন

— singe3

আমি উইন / লিনাক্স ফায়ারফক্স / ক্রোমে বোতামটি কেন্দ্র করে বাদে খাঁটি জাভাস্ক্রিপ্ট সংস্করণ ব্যবহার করেছি এবং এটি ভাল কাজ করেছে। আমি top:বাচ্চাদের স্প্যান সরিয়ে এবং display: flex; align-items: center;প্যারেন্ট স্প্যান এ সেট করে এটি সমাধান করেছি।

— থোমাস৮৮

157

আজকাল এইচটিএমএল 5 এর সাথে এটি বেশ সহজ:

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

বেশিরভাগ আধুনিক ব্রাউজারগুলি ডিফল্টরূপে স্বয়ংক্রিয়ভাবে ক্ষেত্রটিতে একটি ব্যবহারযোগ্য পরিষ্কার বোতাম রেন্ডার করে।

(আপনি যদি বুটস্ট্র্যাপ ব্যবহার করেন তবে এটি দেখানোর জন্য আপনাকে আপনার সিএসএস ফাইলে একটি ওভাররাইড যোগ করতে হবে)

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

সাফারি / ওয়েবকিট ব্রাউজারগুলি ব্যবহার করার সময় এবং type="search"পছন্দ মতো অতিরিক্ত বৈশিষ্ট্যও সরবরাহ করতে পারে তবে তারা আপনার স্টাইলের অনেকগুলি ওভাররাইড করে (যেমন উচ্চতা, সীমানা)। এই ওভাররাইডগুলি রোধ করতে, এখনও এক্স বোতামের মতো কার্যকারিতা ধরে রাখার সময়, আপনি এটি আপনার সিএসএসে যুক্ত করতে পারেন:results=5autosave="..."

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

প্রদত্ত বৈশিষ্ট্যগুলি সম্পর্কে আরও তথ্যের জন্য CSS- কৌশলগুলি দেখুন type="search"।

— নিক মিষ্টি
সূত্র

3

দুর্দান্ত উত্তর, কোনও কোড জড়িত নেই। দুর্ভাগ্যবশত অনেক ব্রাউজারে সমর্থন করে না .. কিছু মনে করবেন না, আমার পণ্যের মধ্যে :) একটি Chrome অতিরিক্ত বৈশিষ্ট্য হবে

— guillaumepotier

48

এইচটিএমএল 'অনুসন্ধান' ইনপুট প্রকারের পরিচয় দেয় যা আমি বিশ্বাস করি আপনি যা চান তা করেন।

<input type="search" />

এখানে একটি সরাসরি উদাহরণ ।

— ThorSummoner
সূত্র

4

যদিও 'অনুসন্ধান' প্রকারটি সমস্ত সাম্প্রতিক ব্রাউজারগুলি দ্বারা সমর্থনযোগ্য (এখানে সমর্থন চেক করুন: wufoo.com/html5), ফায়ারফক্স (32.0.3) বা অপেরা (12.17) এ পরিষ্কার বোতামটি প্রদর্শিত হবে না।

— justanotherprogrammer

9

পরিষ্কার বোতামটি সর্বশেষ ক্রোমে প্রদর্শিত হয় না

— tsayen

3

আপনি যদি বুটস্ট্র্যাপ ব্যবহার করছেন তবে এটি ডিফল্ট আচরণকে ওভাররাইড করতে পারে

— এক্সেল

সংযুক্ত কোডপেন ইনপুটটিতে ক্লোজিং স্ল্যাশ অনুপস্থিত, সুতরাং আপনি যদি কোডপেনে এটি কাজ করে দেখতে চান তবে কেবল ক্লোজিং স্ল্যাশ যুক্ত করুন।

— Gen1-1

@ Gen1-1 ওহো, প্রকাশ্য আপলোড মত দেখাচ্ছে অক্ষম করা হয়েছে blog.codepen.io/2019/08/06/anonymous-pen-save-option-removed কেউ যদি করেছে একটি নির্দিষ্ট কোড কলম, সম্পাদনা বিনা দ্বিধায় দয়া করে এবং সাহায্যের সংশোধন ডেমো

— থারস্মমনার

24

আমাদের jQuery- ক্লিয়ারস অনুসন্ধান প্লাগইনটি দেখুন। এটি একটি কনফিগারযোগ্য jQuery প্লাগইন - ইনপুট ক্ষেত্রটি স্টাইল করে আপনার প্রয়োজনের সাথে এটি খাপ খাই করা সহজ is কেবল এটি নীচে ব্যবহার করুন:

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

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

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

— wldaunfr
সূত্র

এটি দুর্দান্ত, তবে আমি "$ (উইন্ডো) .resize (ফাংশন () {ট্রিগারবিটিএন ()}) এ যুক্ত করার পরামর্শ দেব;" jquery.clears Search.js এ, ঠিক এই পরে $ ('কীপ কীডাউন চেঞ্জ ফোকাস', ট্রিগারবিটিএন); | যাতে আকার পরিবর্তন করা উইন্ডোজগুলি ক্রস অবস্থানটি বিশৃঙ্খলা করবে না

— এনজি সেক লং

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>

স্নিপেট প্রসারিত করুন

— হীরেন
সূত্র