খালি থাকাকালীন আমি কীভাবে একটি HTML পাঠ্য বাক্সটি একটি ইঙ্গিত দেখাব?

Question

আমি চাই আমার ওয়েব পৃষ্ঠার সন্ধান বাক্সটি ধূসর ইটালিকসে "অনুসন্ধান" শব্দটি প্রদর্শন করুক। বাক্সটি যখন ফোকাস পায় তখন এটি খালি পাঠ্য বাক্সের মতো দেখতে হবে। যদি এর মধ্যে ইতিমধ্যে পাঠ্য থাকে তবে এটি পাঠ্যটি স্বাভাবিকভাবে প্রদর্শন করা উচিত (কালো, অ-ইতালি)। এটি আমাকে লেবেলটি সরিয়ে বিশৃঙ্খলা এড়াতে সহায়তা করবে।

বিটিডাব্লু, এটি অন-পৃষ্ঠার অ্যাজাক্স অনুসন্ধান, সুতরাং এর কোনও বোতাম নেই।

Comments

যেহেতু প্রশ্নটি জিজ্ঞাসা করা হয়েছিল HTML5 স্থানধারক বৈশিষ্ট্যটি সমস্ত ব্রাউজার দ্বারা সমর্থিত হয়েছে।

— জেসেন

হাই মাইকেল আপনি কি এই পৃষ্ঠায় গৃহীত উত্তর পরিবর্তন করতে রাজি হবেন? একটি স্পষ্ট বিজয়ী আছে বলে মনে হচ্ছে, যা গৃহীত উত্তরের চেয়ে আলাদা।

— নাল

একটি জাভাস্ক্রিপ্ট সমাধান সহ সমস্যা হ'ল প্রত্যেকেরই জাভাস্ক্রিপ্ট চালু নেই। নোস্ক্রিপ্টের মতো ব্রাউজার প্লাগ-ইন ব্যবহার করলে (বিকাশকারীদের ইনস্টল করার জন্য খুব সহজ) যদি পাঠ্য বাক্সটি ফোকাস হয়ে যায় তখন স্থানধারকটি অদৃশ্য হবে না। স্থানধারক বিকল্পটি সবচেয়ে শক্তিশালী সমাধান।

— সাবেলফোস্টে

Answer 1

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

<input name="email" placeholder="Email Address">

কোনও শৈলীর অনুপস্থিতিতে, ক্রোমে এই রকম দেখাচ্ছে:

আপনি এখানে সিএসএসের সাথে এবং এইচটিএমএল 5 প্লেসহোল্ডার স্টাইলিংয়ে ডেমো ব্যবহার করে দেখতে পারেন ।

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

$('input[placeholder], textarea[placeholder]').placeholder();

Comments

@ ডুক, এটি Fx3.7 +, (সাফারি / ক্রোম) এবং অপেরাতে কাজ করে। আইই 9 এটি সমর্থন করে না, তাই আমি অনুমান করি আই 8 এটিও হয় না।

— আলেসান্দ্রো ভার্মুলেইন

হ্যাঁ আমি আজই সন্ধান করেছি যে এফএফ 3.6 এটি সমর্থন করে না।

— ড্রয় নোকস

আমি মনে করি এটি আবার সরানো হয়েছে। আমি এটি এখানে পেয়েছি: github.com/mathiasbynens/jquery- স্থানধারক

— জোকুল

ক্যাভেট বিকাশকারী "ইন্টারনেট এক্সপ্লোরার 10 এবং 11 ক্ষেত্রটি ফাঁকা থাকলেও ক্ষেত্রটি ফোকাস করার সময় স্থানধারককে দেখায় না।"

— কর্নেল আতঙ্ক

Answer 2

এটি একটি পাঠ্যবক্স ওয়াটারমার্ক হিসাবে পরিচিত, এবং এটি জাভাস্ক্রিপ্টের মাধ্যমে সম্পন্ন হয়।

• http://naspinski.net/post/Text-Input-Watermarks-using-Javascript-(IE-Compatible).aspx

বা আপনি যদি jQuery ব্যবহার করেন তবে আরও ভাল পদ্ধতির:

• http://digitalbush.com/projects/watermark-input-plugin/
• অথবা কোড. google.com/p/jquery- ওয়াটারমার্ক

Comments

সেই দ্বিতীয় লিঙ্কটি নষ্ট হয়ে গেছে। এটি একই রকম হতে পারে: ডিজিটালবাশ.com

— মাইকেল হরেন

অন্য jQuery পদ্ধতির সন্ধান পেয়েছে। এই প্রকল্পটি @ কোড. google.com/p/jquery- ওয়াটারমার্ক

— জেপি

ডিজিটাল ব্রাশ প্লাগইন 'ওয়াটারমার্ক' ডাটাবেসে সংরক্ষণ করবে। এটি বিটাতে রয়েছে এবং ২০০ 2007 সাল থেকে আপডেট করা হয়নি instead @JP এর পরামর্শ অনুসারে কোড জিড / পি / জ্যাকারি- ওয়াটারমার্কের পরিবর্তে আমি সুপারিশ করছি ।

— কিমবল রবিনসন

আমি মনে করি প্রশ্নের লেখক ফিরে যেতে হবে এবং @ জেপি মন্তব্যটিকে সেরা উত্তর হিসাবে চিহ্নিত করবে।

— র্যান্ডি এল

JQuery ওয়াটারমার্ক প্লাগইনটি বেশ নুবহুল কারণ এটি হ্যান্ডেল করে না যেখানে ইনপুট পূর্ব-ভরাট মানের মতো। সেক্ষেত্রে এটি আপনার ইনপুট পাঠ্যটিকে আবার ধূসর করে তোলে!

— পিএম

Answer 3

আপনি এইচটিএমএলে ( ব্রাউজার সমর্থন ) বৈশিষ্ট্যটি ব্যবহার করে স্থানধারক সেট করতে পারেন । এবং করা যেতে পারে সিএসএস পরিবর্তন (যদিও ব্রাউজার সমর্থনের সীমাবদ্ধ)।placeholderfont-stylecolor

input[type=search]::-webkit-input-placeholder { /* Safari, Chrome(, Opera?) */
 color:gray;
 font-style:italic;
}
input[type=search]:-moz-placeholder { /* Firefox 18- */
 color:gray;
 font-style:italic;
}
input[type=search]::-moz-placeholder { /* Firefox 19+ */
 color:gray;
 font-style:italic;
}
input[type=search]:-ms-input-placeholder { /* IE (10+?) */
 color:gray;
 font-style:italic;
}

<input placeholder="Search" type="search" name="q">

Comments

এটি সন্ধান করছিল

— ডেভিড ইয়েল

এটি এখন স্বীকৃত উত্তর হওয়া উচিত। এটি মূলত ২০১০ সালে পোস্ট করা হলে স্থানধারক বৈশিষ্ট্যটি ব্যাপকভাবে সমর্থিত না হতে পারে তবে এখন এটি আইই8 বাদে সমস্ত বর্তমান ব্রাউজার দ্বারা সমর্থিত।

— JSP64

Answer 4

আপনি একটি বিশেষ সিএসএস ক্লাস যুক্ত করতে এবং মুছে ফেলতে এবং জাভাস্ক্রিপ্ট সহ ইনপুট মান onfocus/ সংশোধন করতে পারেন onblur:

<input type="text" class="hint" value="Search..."
    onfocus="if (this.className=='hint') { this.className = ''; this.value = ''; }"
    onblur="if (this.value == '') { this.className = 'hint'; this.value = 'Search...'; }">

তারপরে আপনার সিএসএসে আপনি পছন্দসই স্টাইলিং সহ একটি ইঙ্গিত শ্রেণি নির্দিষ্ট করুন :

input.hint {
    color: grey;
}

Comments

আমি একটি উত্তর পোস্ট করেছি যা একই জিনিসটি করে তবে আরও সুবিধাজনক এবং রক্ষণাবেক্ষণ পদ্ধতিতে: স্ট্যাকওভারফ্লো

— নোকস

Answer 5

সবচেয়ে ভালো উপায় মত JavaScript লাইব্রেরি কিছু ব্যবহার করে আপনার জাভাস্ক্রিপ্ট ঘটনা আপ টেলিগ্রাম হয় jQuery এর বা Yui একটি বাইরের .js ফাইল আপনার কোড করা।

তবে আপনি যদি দ্রুত এবং নোংরা সমাধান চান তবে এটি হ'ল আপনার ইনলাইন এইচটিএমএল-সমাধান:

<input type="text" id="textbox" value="Search"
    onclick="if(this.value=='Search'){this.value=''; this.style.color='#000'}" 
    onblur="if(this.value==''){this.value='Search'; this.style.color='#555'}" />

আপডেট হয়েছে : অনুরোধ করা রঙ-স্টাফ যুক্ত।

Comments

এটি অনুসন্ধানের জন্য ঠিক আছে, তবে অনেক ক্ষেত্রে আপনি কোনও জমা দেওয়া ইভেন্টে জলছাপগুলি জমা দিতে চান না।

— কিমবল রবিনসন

@ কে.রোবিনসন আমি এই বিবৃতিটিকে +1 করি। এই মুহুর্তে এটি ছিল দ্রুততম এবং সবচেয়ে কমপ্যাক্ট কোড। এটি জাভাস্ক্রিপ্ট কোড-ব্লক দিয়ে আরও সূক্ষ্ম সমাধান করতে পারে।

— সেব নীলসন

Answer 6

কিছুক্ষণ আগে আমি আমার ওয়েবসাইটে এর জন্য একটি সমাধান পোস্ট করেছি । এটি ব্যবহার করতে, একটি একক .jsফাইল আমদানি করুন:

<script type="text/javascript" src="/hint-textbox.js"></script>

তারপরে সিএসএস বর্গের সাথে আপনি যে ইনপুটগুলি ইঙ্গিতগুলি রাখতে চান তা উল্লেখ করুন hintTextbox:

<input type="text" name="email" value="enter email" class="hintTextbox" />

আরো তথ্য এবং উদাহরণ পাওয়া যায় এখানে ।

Comments

তবে তা ভেঙে গেছে। যদি আমি একই পাঠ্যটিকে ইঙ্গিত করেছিলাম তবে এটি এমন আচরণ করে যে কোনও ইনপুট দেওয়া হয়নি (যদি আমি আবার এটিতে ট্যাব করি এবং তারপরে আবার আউট হয়ে যাই)

— স্টিফান এগারমোঁট

@ স্টাফেন: হ্যাঁ, আমি কেবল এটিই জানি cave আপনি বাস্তবে বাস্তবে এটি একটি সমস্যা হতে পারে? যদি তা হয় তবে আপনাকে উপরে একটি ডিভিআর স্তর প্রদর্শন এবং এটি প্রদর্শন / লুকিয়ে রাখতে পারে। এটি আমার জানা সবচেয়ে সহজ সমাধান। জাভাস্ক্রিপ্ট অক্ষম থাকলে আমিও সুন্দরভাবে হ্রাস পেয়েছি।

— ড্র নোকস

আমি মান নির্ধারণ দ্বারা ট্রিগার হয়েছিল। আমার কাছে বিদ্যমান বা ডিফল্ট মান এবং পূর্ববর্তী বাক্সটি খালি থাকা অবস্থায় একটি ইঙ্গিত সহ প্রি-ফিলিংয়ের সম্মিলিত প্রয়োজন আছে

— স্টিফান এগারমোঁট

@ স্টেফান - আমি আজ এটির প্রয়োজনটি পূরণ করেছি এবং jQuery প্লাগইনগুলি দেখছি। গৃহীত উত্তরের সাথে লিঙ্কযুক্ত একজন আমার মতো একই সমস্যায় ভুগছে। আপনি কি বিকল্প জানেন?

— ড্র নোকস

Answer 7

গুগল অ্যাজাক্স লাইব্রেরি ক্যাশে এবং কিছু jQuery যাদু সহ এখানে কার্যকরী উদাহরণ।

এটি সিএসএস হবে:

<style type="text/stylesheet" media="screen">
    .inputblank { color:gray; }  /* Class to use for blank input */
</style>

এটি জাভাস্ক্রিপ্ট কোড হবে:

<script language="javascript"
        type="text/javascript"
        src="http://www.google.com/jsapi">
</script>
<script>
    // Load jQuery
    google.load("jquery", "1");

    google.setOnLoadCallback(function() {
        $("#search_form")
            .submit(function() {
                alert("Submitted. Value= " + $("input:first").val());
                return false;
        });

        $("#keywords")
            .focus(function() {
                if ($(this).val() == 'Search') {
                    $(this)
                    .removeClass('inputblank')
                    .val('');
                }
            })
            .blur(function() {
                if ($(this).val() == '') {
                    $(this)
                    .addClass('inputblank')
                    .val('Search');
                }
            });
    });
</script>

এবং এটি এইচটিএমএল হবে:

<form id="search_form">
    <fieldset>
        <legend>Search the site</legend>
            <label for="keywords">Keywords:</label>
        <input id="keywords" type="text" class="inputblank" value="Search"/>
    </fieldset>
</form>

আমি আশা করি GAJAXLibs এবং jQuery উভয় ক্ষেত্রেই আপনাকে আগ্রহী করার পক্ষে এটি যথেষ্ট।

Answer 8

এখন এটা খুব সহজ হয়ে ওঠে। এইচটিএমএলে আমরা ইনপুট উপাদানগুলির জন্য স্থানধারক বৈশিষ্ট্যটি দিতে পারি ।

যেমন

<input type="text" name="fst_name" placeholder="First Name"/>

আরো বিস্তারিত জানার জন্য দেখুন: http://www.w3schools.com/tags/att_input_placeholder.asp

Answer 9

JQuery ব্যবহারকারীদের জন্য: নাসপিনস্কির jQuery লিঙ্কটি ভাঙা মনে হচ্ছে তবে এটি ব্যবহার করে দেখুন: http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/

আপনি বোনাস হিসাবে একটি ফ্রি jQuery প্লাগইন টিউটোরিয়াল পাবেন। :)

Comments

আমি ট্রিপফুটপ্রিন্ট.কম এ রেমির প্লাগইন ব্যবহার করি এবং এটি দুর্দান্ত কাজ করে; আমি ভালবাসি যে এটি অনুসরণ করা এবং কুঁচকানো যথেষ্ট সহজ।

— অনিরওয়ান

Answer 10

আমি শীর্ষস্থানীয় উত্তরের তালিকাভুক্তের চেয়ে jQuery প্লাগইন jQuery ওয়াটারমার্ককে আরও ভাল হতে দেখেছি । কেন ভাল? কারণ এটি পাসওয়ার্ড ইনপুট ক্ষেত্রগুলিকে সমর্থন করে। এছাড়াও, ওয়াটারমার্কের রঙ নির্ধারণ করা (বা অন্যান্য বৈশিষ্ট্যগুলি) .watermarkআপনার সিএসএস ফাইলে একটি রেফারেন্স তৈরি করার মতোই সহজ ।

Answer 11

একে "ওয়াটারমার্ক" বলা হয়।

আমি jQuery প্লাগইন jQuery ওয়াটারমার্ক পেয়েছি যা প্রথম উত্তর থেকে ভিন্ন, অতিরিক্ত সেটআপের প্রয়োজন হয় না (ফর্মটি জমা দেওয়ার আগে মূল উত্তরটিরও একটি বিশেষ কল প্রয়োজন)।

Answer 12

JQuery ফর্ম নোটিফায়ার ব্যবহার করুন - এটি সর্বাধিক জনপ্রিয় jQuery প্লাগইনগুলির মধ্যে একটি এবং এখানে অন্যান্য jQuery পরামর্শগুলির মধ্যে কিছু বাগগুলি ভোগ করে না (উদাহরণস্বরূপ, আপনি ওয়াটারমার্ককে নির্বিঘ্নে স্টাইল করতে পারেন, এটি চিন্তিত না করে যদি এটি সংরক্ষণ হয়ে যায় তবে) তথ্যশালা).

jQuery ওয়াটারমার্ক ফর্ম উপাদানগুলিতে সরাসরি একটি সিএসএস শৈলী ব্যবহার করে (আমি লক্ষ্য করেছি যে ওয়াটারমার্কে প্রয়োগ হওয়া সিএসএস ফন্ট-আকারের বৈশিষ্ট্যগুলিও পাঠ্য বাক্সগুলিতে প্রভাব ফেলেছিল - আমি যা চাইছিলাম তা নয়)) JQuery ওয়াটারমার্ক সহ প্লাস হ'ল আপনি ক্ষেত্রগুলিতে টেক্সট টানতে পারেন (jQuery ফর্ম নোটিফায়ার এটির অনুমতি দেয় না)।

অন্য কেউ পরামর্শ দিয়েছেন (ডিজিটালব্রাশ ডটকমের একটি), দুর্ঘটনাক্রমে আপনার ফর্মটিতে জলছবি মান জমা দেবে, তাই আমি এর বিরুদ্ধে দৃ I়ভাবে প্রস্তাব দিচ্ছি recommend

Answer 13

পাঠ্যটি রেন্ডার করতে একটি পটভূমি চিত্র ব্যবহার করুন:

 input.foo { }
 input.fooempty { background-image: url("blah.png"); }

তারপরে আপনাকে যা করতে হবে তা হ'ল value == 0সঠিক শ্রেণিটি সনাক্ত এবং প্রয়োগ করা:

 <input class="foo fooempty" value="" type="text" name="bar" />

এবং jQuery জাভাস্ক্রিপ্ট কোডটি দেখতে এমন দেখাচ্ছে:

jQuery(function($)
{
    var target = $("input.foo");
    target.bind("change", function()
    {
        if( target.val().length > 1 )
        {
            target.addClass("fooempty");
        }
        else
        {
            target.removeClass("fooempty");
        }
    });
});

Answer 14

আপনি সহজেই একটি বাক্স "অনুসন্ধান" পড়তে পারেন তারপরে যখন ফোকাসটি পরিবর্তন করা হয় তখন পাঠ্যটি সরিয়ে ফেলা হবে। এটার মতো কিছু:

<input onfocus="this.value=''" type="text" value="Search" />

অবশ্যই যদি আপনি এটি করেন তবে তারা ক্লিক করলে ব্যবহারকারীর নিজস্ব পাঠ্য অদৃশ্য হয়ে যাবে। সুতরাং আপনি সম্ভবত আরও শক্তিশালী কিছু ব্যবহার করতে চান:

<input name="keyword_" type="text" size="25"  style="color:#999;" maxlength="128" id="keyword_"
onblur="this.value = this.value || this.defaultValue; this.style.color = '#999';"
onfocus="this.value=''; this.style.color = '#000';"
value="Search Term">

Answer 15

পৃষ্ঠাটি প্রথম লোড হয়ে গেলে, অনুসন্ধানটি পাঠ্য বাক্সে উপস্থিত হওয়া উচিত, যদি আপনি এটি চান তবে রঙিন ধূসর।

ইনপুট বাক্সটি যখন ফোকাস পায়, তখন অনুসন্ধান বাক্সের সমস্ত পাঠ্য নির্বাচন করুন যাতে ব্যবহারকারী কেবল টাইপিং শুরু করতে পারেন, যা প্রক্রিয়াটিতে নির্বাচিত পাঠ্য মুছবে। ব্যবহারকারী যদি দ্বিতীয়বার অনুসন্ধান বাক্সটি ব্যবহার করতে চায় তবে এটি পূর্বের পাঠ্যটি মোছার জন্য ম্যানুয়ালি হাইলাইট করতে হবে না কারণ এটি দুর্দান্তভাবে কাজ করবে।

<input type="text" value="Search" onfocus="this.select();" />

Answer 16

আমি "জ্ঞান চিকুস" এর সমাধানটি পছন্দ করি - সহজ এবং পরিষ্কার। পৃষ্ঠার লোড প্রস্তুত হওয়ার সময় কেবল অস্পষ্ট হয়ে যাওয়ার জন্য একটি কল যুক্ত করা দরকার যা প্রাথমিক অবস্থাটি সেট করবে:

$('input[value="text"]').blur();

Answer 17

আপনি অনফোকাসকে এই জাতীয় কিছু নির্ধারণ করতে চান:

if (this.value == this.defaultValue)
    this.value = ''
this.className = ''

এবং এই onblur:

if (this.value == '')
    this.value = this.defaultValue
this.className = 'placeholder'

(আপনি চাইলে ক্লাসনেম স্যুইচিং করতে ফ্রেমওয়ার্ক ফাংশনের মতো কিছুটা চালাক কিছু ব্যবহার করতে পারেন))

এর মতো কয়েকটি সিএসএস সহ:

input.placeholder{
    color: gray;
    font-style: italic;
}

Answer 18

আমি একটি সাধারণ, এক লাইনের জাভাস্ক্রিপ্ট সমাধান ব্যবহার করছি যা দুর্দান্ত কাজ করে। এখানে পাঠ্যবাক্স এবং টেক্সারিয়া উভয়ের উদাহরণ রয়েছে:

    <textarea onfocus="if (this.value == 'Text') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Text'; }">Text</textarea>

    <input type="text" value="Text" onfocus="if (this.value == 'Text') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Text'; }">

কেবলমাত্র "ডাউনসাইড" হ'ল ক্ষেত্রের মান সহ কিছু করার আগে জাভাস্ক্রিপ্ট বৈধকরণে $ _POST বা জাভাস্ক্রিপ্ট বৈধতাতে যাচাই করা। অর্থ, ক্ষেত্রের মান "পাঠ্য" নয় তা পরীক্ষা করা হচ্ছে।

Answer 19

$('input[value="text"]').focus(function(){ 
if ($(this).attr('class')=='hint') 
{ 
   $(this).removeClass('hint'); 
   $(this).val(''); 
}
});

$('input[value="text"]').blur(function(){
  if($(this).val() == '')
  {
    $(this).addClass('hint');
    $(this).val($(this).attr('title'));
  } 
});

<input type="text" value="" title="Default Watermark Text">

Answer 20

সাধারণ এইচটিএমএল 'প্রয়োজনীয়' ট্যাগটি কার্যকর।

<form>
<input type="text" name="test" id="test" required>
<input type="submit" value="enter">
</form>

এটি নির্দিষ্ট করে যে ফর্মটি জমা দেওয়ার আগে একটি ইনপুট ক্ষেত্রটি পূরণ করতে হবে বা বোতামটি জমা দিয়ে টিপুন। এখানে উদাহরণ

Comments

যদিও এটি দরকারী, এটির প্রশ্নের সাথে কোনও সম্পর্ক নেই।

— কোয়ান্টিন

Answer 21

ব্যবহারকারী এএসএক্সটুলকিট http://asp.net থেকে