CSS বা jquery ব্যবহার করে আমি কীভাবে স্থানধারক পাঠ্যটি স্বয়ংক্রিয়ভাবে আড়াল করব?

Question

এটি ক্রোম বাদে প্রতিটি ব্রাউজারের জন্য স্বয়ংক্রিয়ভাবে সম্পন্ন হয় ।

আমি অনুমান করছি যে আমাকে বিশেষভাবে ক্রোমকে লক্ষ্য করতে হবে ।

কোন সমাধান?

যদি CSS এর সাথে না হয় তবে jQuery এর সাথে ?

আন্তরিক শুভেচ্ছা.

Comments

আমার সম্পাদনাটি তখন চেক করুন, এটি সাহায্য করতে পারে

— টনি মিশেল কাবাবেট

অপেরা এছাড়াও অন্য ব্রাউজার যা ফোকাসের স্থানধারককে সরিয়ে দেয়।

— লুকাস

15 সংস্করণ হিসাবে ফায়ারফক্স আপনি টাইপ করা শুরু না করা প্লেসোল্ডার পাঠ্য আর সরিয়ে ফেলবে না। আমি বিশ্বাস করি আইই 10 এর ক্ষেত্রেও এটি একই রকম হতে পারে তবে তা যাচাই করার কোনও উপায় আমার কাছে নেই।

— রব ফ্লেচার

আমি উদ্বিগ্ন যে কেউই এই সত্যটির উল্লেখ করেনি যে আপনার ব্রাউজারের স্থানীয় আচরণগুলি সংশোধন করা উচিত নয়। আমি সবার চেয়ে পছন্দ করি যে স্থানধারক উপস্থিত থাকবেন। এটি কেবলমাত্র আমাকে শেষ ব্যবহারকারী হিসাবে সহায়তা করে এবং এটি এমন একটি বৈশিষ্ট্য যা ব্রাউজারগুলি এখন প্রয়োগ করতে শুরু করেছে ... সম্ভবত অদৃশ্য-দৃষ্টি নিবদ্ধ হওয়া আচরণটি ব্যবহারযোগ্যতার সমস্যা হিসাবে প্রমাণিত হয়েছে। দয়া করে ব্রাউজারটি হতে দিন।

— রায়ান হুইল

"এটি ক্রোম বাদে প্রতিটি ব্রাউজারের জন্য স্বয়ংক্রিয়ভাবে সম্পন্ন হয়।" আর না? আমি এটি ফায়ারফক্স ৩.0.০.২, সাফারি .1.১.৫ এবং ক্রোম ৪২.০ এ ওএসএক্স-এ চেষ্টা করেছি। আমি টাইপ করা শুরু না করা অবধি প্লেসহোল্ডার পাঠ্যটি কেউ মুছে ফেলবে না এবং ক্ষেত্রটি সাফ করার পরে এগুলি সমস্তই এটি ফিরিয়ে দেয়।

— নাথান লং

Answer 1

<input 
type="text" 
placeholder="enter your text" 
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'enter your text'" />

Comments

এটি যেতে দেয় তবে আমি যখন ক্ষেত্র থেকে দূরে ক্লিক করি তবে এটি ফাঁকা থাকে।

— লন্ডনগুই

@ লন্ডনগুই: স্রেফ আমার পোস্টটি সম্পাদনা করেছেন, দেখুন এটি আপনার পছন্দ মতো কাজ করে কিনা। তবে টনি মিশেল কাবাবেট

— দ্রবণটি দুর্দান্ত

এখানে সমস্যা হ'ল এটি বিঘ্নিত জাভাস্ক্রিপ্ট। টনি মিশেল কাউবেটের সমাধান আরও ভাল।

— সিলসস্টার

আমি এটি পছন্দ করি তবে দুর্ভাগ্যক্রমে এটি আই বা সাফারি উভয়ই কাজ করে না।

— মোহাম্মদ মৌস্তফা

কাজ করছে না. stackblitz.com/edit/angular-jd2l6y-frudzk?file=app/…

— এটি আমার

Answer 2

সম্পাদনা করুন: এখন সমস্ত ব্রাউজার সমর্থন করে

input:focus::placeholder {
  color: transparent;
}

<input type="text" placeholder="Type something here!">

ফায়ারফক্স 15 এবং আইই 10+ এখন এটি সমর্থন করে। ক্যাসি চুর সিএসএস সমাধানগুলিতে প্রসারিত করতে :

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

Comments

দুর্দান্ত উত্তর! HTML5 এর পক্ষে আমার পুরানো jQuery সমাধানটি ত্যাগ করার ক্ষেত্রে আমি খুব একটা বোধগম্যতা দেখছি না এবং তারপরে ডানদিকে এগিয়ে যাব এবং জাভাস্ক্রিপ্টটিকে ফিক্স হিসাবে আবার যুক্ত করব। এটি আমিই সলিউশন খুঁজছিলাম।

— নিয়ান্ন

@ মার্টিনহান্ট আপনি এফএফ এ চেষ্টা করেছেন? ইনপুট: ফোকাস :: - মোজ-প্লেসোল্ডার

— ফিলিপ

একটি পুরানো থ্রেড ড্রেজিংয়ের জন্য ক্ষমা চাই, তবে কেবল এটি আরও সম্পূর্ণ করার জন্য: ইনপুট: ফোকাস: -মোজ-প্লেসোল্ডার ফায়ারফক্স 18 এবং নীচে, 19 এর জন্য আপনাকে ব্যবহার করতে হবে: ইনপুট: ফোকাস :: - মোজ-প্লেসোল্ডার (নোট ডাবল কোলন)। রেফ: রেফারেন্স: css-tricks.com/snippets/css/style- placeholder

— পিটার লুইস

এই মন্তব্য একটি জয়। গতিশীল নিয়ন্ত্রণ সঙ্গে খুব কাজ, Kendo মত

— reflog

আমার কাছ থেকেও দুর্দান্ত উত্তর! আমাদের মধ্যে যাদের ক্ষেত্রে এই ক্ষেত্রটি অক্ষম করা হয় তাদের জন্য এই কার্যকারিতাটির প্রয়োজন হতে পারে সিএসএস কোড: / * স্থানধারক পাঠ্য (যদি কোনও হয়) লুকানো থাকে, যখন হোল্ডিং ক্ষেত্রটি অক্ষম করা হয় * / ইনপুট: অক্ষম :: - ওয়েবকিট ইনপুট- স্থানধারক {রঙ: স্বচ্ছ; } ইনপুট: অক্ষম: -মোজ-স্থানধারক {রঙ: স্বচ্ছ; } ইনপুট: অক্ষম :: - মোজ-স্থানধারক {রঙ: স্বচ্ছ; } ইনপুট: অক্ষম: -মাম-ইনপুট-স্থানধারক {রঙ: স্বচ্ছ; }

— রামনগম

Answer 3

এখানে একটি সিএসএস-সমাধান রয়েছে (আপাতত কেবল ওয়েবকিটে কাজ করে):

input:focus::-webkit-input-placeholder {
    opacity: 0;
}

Comments

আমি এই উত্তরটি পছন্দ করি, তবে এটির জন্য ব্রাউজার সমর্থন এখনও নেই isn't

— জেরি

Answer 4

খাঁটি সিএসএস সলিউশন (জেএসের প্রয়োজন নেই)

@ হেক্সডাস এবং @ ক্যাসি চু এর উত্তরগুলিতে বিল্ডিং, এখানে একটি আপডেটেড এবং ক্রস-ব্রাউজার সমাধান রয়েছে যা প্লেসহোল্ডার পাঠ্য আস্তে আস্তে ফেলার জন্য সিএসএস অস্বচ্ছতা এবং ট্রানজিশনগুলিকে সহায়তা করে। এটি এমন কোনও উপাদানগুলির জন্য কাজ করে যা প্লেসোল্ডারগুলি সহ ট্যাগ textareaএবং inputট্যাগ ব্যবহার করতে পারে ।

::-webkit-input-placeholder { opacity: 1; -webkit-transition: opacity .5s; transition: opacity .5s; }  /* Chrome <=56, Safari < 10 */
:-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 4-18 */
::-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 19-51 */
:-ms-input-placeholder { opacity: 1; -ms-transition: opacity .5s; transition: opacity .5s; } /* IE 10+ */
::placeholder { opacity: 1; transition: opacity .5s; } /* Modern Browsers */

*:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome <=56, Safari < 10 */
*:focus:-moz-placeholder { opacity: 0; } /* FF 4-18 */
*:focus::-moz-placeholder { opacity: 0; } /* FF 19-50 */
*:focus:-ms-input-placeholder { opacity: 0; } /* IE 10+ */
*:focus::placeholder { opacity: 0; } /* Modern Browsers */

সম্পাদনা: আধুনিক ব্রাউজারগুলিকে সমর্থন করার জন্য আপডেট হয়েছে।

Comments

সেরা সিএসএস সমাধান!

— ফাতেহ স্যারি

ভাল পুরানো সিএসএস ... দুর্দান্ত সহজ সমাধান! কেন আমি তা ভেবে দেখিনি ??

— JI-Web

Answer 5

আপনি কি স্থানধারীর অ্যাটর চেষ্টা করেছেন?

<input id ="myID" type="text" placeholder="enter your text " />

-EDIT-

আমি দেখছি, এটি চেষ্টা করে দেখুন:

$(function () {

    $('#myId').data('holder', $('#myId').attr('placeholder'));

    $('#myId').focusin(function () {
        $(this).attr('placeholder', '');
    });
    $('#myId').focusout(function () {
        $(this).attr('placeholder', $(this).data('holder'));
    });


});

পরীক্ষা: http://jsfiddle.net/mPLFf/4/

-EDIT-

আসলে, যেহেতু স্থানধারকটি ইনপুটটির নাম নয়, মান বর্ণনা করতে ব্যবহার করা উচিত। আমি নিম্নলিখিত বিকল্প প্রস্তাব

এইচটিএমএল:

<label class="overlabel"> 
    <span>First Name</span>
    <input name="first_name" type="text" />
</label>

জাভাস্ক্রিপ্ট:

$('.overlabel').each(function () {
    var $this = $(this);
    var field = $this.find('[type=text], [type=file], [type=email], [type=password], textarea');
    var span = $(this).find('> span');
    var onBlur = function () {
        if ($.trim(field.val()) == '') {
            field.val('');
            span.fadeIn(100);
        } else {
            span.fadeTo(100, 0);
        }
    };
    field.focus(function () {
        span.fadeOut(100);
    }).blur(onBlur);
    onBlur();
});

CSS:

.overlabel {
  border: 0.1em solid;
  color: #aaa;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  min-height: 2.2em;
}
.overlabel span {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.overlabel span, .overlabel input {
  text-align: left;
  font-size: 1em;
  line-height: 2em;
  padding: 0 0.5em;
  margin: 0;
  background: transparent;
  -webkit-appearance: none; /* prevent ios styling */
  border-width: 0;
  width: 100%;
  outline: 0;
}

টেস্ট:

http://jsfiddle.net/kwynwrcf/

Comments

ডেটা অ্যাট্রিবিউটটি ব্যবহার হচ্ছে দেখে ভাল লাগছে। তবে আমি সিএসএস সমতুল্য দেখব। ক্যাশেড করা হলে এটি একটি দ্রুত সমাধান হবে এবং এটি বিশ্বব্যাপী হতে পারে। উপরের জন্য প্রয়োজনীয় প্রতিটি উপাদানের উপর ডেটা অ্যাট্রিবিউট স্থাপন করা দরকার। (নীচের উত্তর)

— নিল

এটি অত্যধিক জটিল। অনেক কম কোড দিয়ে করা যায়।

— জেগালার্ডো

@ জেগালার্ডো আমাকে আলো দেখান (তবে আপনি নিশ্চিত হন যে 3 টি পৃথক সমাধান রয়েছে কিনা তা আমি নিশ্চিত নই)

— টনি মিশেল কাবেট

Answer 6

@ কেসি-চু এবং জলদস্যুদের রবের উত্তর বাড়াতে, এখানে আরও একটি ক্রস ব্রাউজার সুসংগত উপায়:

    /* WebKit browsers */
input:focus::-webkit-input-placeholder { color:transparent; }

    /* Mozilla Firefox 4 to 18 */
input:focus:-moz-placeholder { color:transparent; }

    /* Mozilla Firefox 19+ */
input:focus::-moz-placeholder { color:transparent; }

    /* Internet Explorer 10+ */
input:focus:-ms-input-placeholder { color:transparent; }

Comments

ঠিক এখন আমি যা লিখেছি (পরিবর্তে আমি ব্যবহার করেছি opacity:0;)! সমস্ত সম্ভাব্য ব্রাউজার সমর্থন করে এই থ্রেডে একমাত্র সিএসএস সমাধান!

— ReynekeVosz

Answer 7

টোনির উত্তরটি ভাল, তবে আমি বরং এটিকে IDস্পষ্টভাবে ব্যবহার করব এবং inputএইভাবে placeholderআচরণের সাথে সমস্ত ইনপুট ব্যবহার করব:

<input type="text" placeholder="your text" />

নোট যে সংক্ষিপ্ত $(function(){ });জন্য $(document).ready(function(){ });:

$(function(){
    $('input').data('holder',$('input').attr('placeholder'));
    $('input').focusin(function(){
        $(this).attr('placeholder','');
    });
    $('input').focusout(function(){
        $(this).attr('placeholder',$(this).data('holder'));
    });
})

ডেমো।

Comments

আপনার একাধিক ক্ষেত্র থাকলে এটি কাজ করে না। এখানে আপনার কোডের বর্ধিত সংস্করণ দেওয়া আছে jsfiddle.net/6CzRq/64

— svlada

Answer 8

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

$("[placeholder]").togglePlaceholder();

$.fn.togglePlaceholder = function() {
    return this.each(function() {
        $(this)
        .data("holder", $(this).attr("placeholder"))
        .focusin(function(){
            $(this).attr('placeholder','');
        })
        .focusout(function(){
            $(this).attr('placeholder',$(this).data('holder'));
        });
    });
};

Answer 9

কখনও কখনও আপনার স্টাইলগুলি শক্তিশালী ফ্যাক্টরের সাথে প্রয়োগ করা হয় তা নিশ্চিত করার জন্য আপনাকে স্পেসিফিকেশনের প্রয়োজন হয় @ idরব ফ্লেচার তার দুর্দান্ত উত্তরের জন্য ধন্যবাদ, আমাদের সংস্থায় আমরা ব্যবহার করেছি

সুতরাং দয়া করে অ্যাপ্লিকেশন ধারকটির আইডি সহ উপসর্গযুক্ত শৈলীগুলি যুক্ত বিবেচনা করুন

    #app input:focus::-webkit-input-placeholder, #app  textarea:focus::-webkit-input-placeholder {
        color: #FFFFFF;
    }

    #app input:focus:-moz-placeholder, #app textarea:focus:-moz-placeholder {
        color: #FFFFFF;
    }

Answer 10

খাঁটি সিএসএসের সাথে এটি আমার পক্ষে কাজ করেছিল। ইনপুট-এ প্রবেশ / ফোকাস এলে স্বচ্ছ করুন Make

 input:focus::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: transparent !important;
 }
 input:focus::-moz-placeholder { /* Firefox 19+ */
   color: transparent !important;
 }
 input:focus:-ms-input-placeholder { /* IE 10+ */
   color: transparent !important;
 }
 input:focus:-moz-placeholder { /* Firefox 18- */
   color: transparent !important;
  }

Answer 11

ওয়ালেস সিদ্ধির কোড নমুনা আরও পরিমার্জন করতে :

$(function()
{  
      $('input').focusin(function()
      {
        input = $(this);
        input.data('place-holder-text', input.attr('placeholder'))
        input.attr('placeholder', '');
      });

      $('input').focusout(function()
      {
          input = $(this);
          input.attr('placeholder', input.data('place-holder-text'));
      });
})

এটি প্রতিটি ইনপুট ডেটা অ্যাট্রিবিউটে সঠিক স্থানধারক পাঠ্য সংরক্ষণ করে তা নিশ্চিত করে।

একটি দেখুন কাজ উদাহরণস্বরূপ jsFiddle এখানে ।

Answer 12

আমি সিএসএস পন্থাটি রূপান্তর সহ মশলাদার পছন্দ করি। স্থানধারককে ফিকে করে ফোকাস করুন;) টেক্সারিয়াসের জন্যও কাজ করে।

দুর্দান্ত ধারণাটির জন্য @ ক্যাসি চুকে ধন্যবাদ।

textarea::-webkit-input-placeholder, input::-webkit-input-placeholder { 
    color: #fff;
    opacity: 0.4;
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s; 
}

textarea:focus::-webkit-input-placeholder, input:focus::-webkit-input-placeholder  { 
    opacity: 0;
}

Answer 13

Http://bourbon.io/ এর সাথে এসসিএসএস ব্যবহার করে , এই সমাধানটি সহজ, মার্জিত এবং সমস্ত ওয়েব ব্রাউজারে কাজ করে:

input:focus {
  @include placeholder() {
    color: transparent;
  }
}

বোর্বান ব্যবহার করুন! এটা আপনার জন্য ভাল !

Answer 14

সিএসএসের এই অংশটি আমার পক্ষে কাজ করেছে:

input:focus::-webkit-input-placeholder {
        color:transparent;

}

Comments

এটি JQuery ছাড়া এটি করার একটি দুর্দান্ত উপায় :)

— tehX

Answer 15

খাঁটি সিএসএস ভিত্তিক সমাধানের জন্য:

input:focus::-webkit-input-placeholder  {color:transparent;}
input:focus::-moz-placeholder   {color:transparent;}
input:-moz-placeholder   {color:transparent;}

দ্রষ্টব্য: এখনও সমস্ত ব্রাউজার বিক্রেতাদের দ্বারা সমর্থিত নয়।

তথ্যসূত্র: ইলিয়া রাইসকিনের সিএসএসের সাথে ফোকাসে স্থানধারক পাঠ্যটি লুকান ।

Answer 16

এইচটিএমএল:

<input type="text" name="name" placeholder="enter your text" id="myInput" />

JQuery:

$('#myInput').focus(function(){
  $(this).attr('placeholder','');
});
$('#myInput').focusout(function(){
  $(this).attr('placeholder','enter your text');
});

Comments

এটি কেবল একটি ইনপুট অনুমান করে।

— নিম

Answer 17

2018> জ্যাকুয়েরি v.3.3 সমাধান: সমস্ত ইনপুট জন্য প্লেয়ারহোল্ডারের সাথে টেক্সটরিয়া কাজ করছে y

 $(function(){
     $('input, textarea').on('focus', function(){
        if($(this).attr('placeholder')){
           window.oldph = $(this).attr('placeholder');
            $(this).attr('placeholder', ' ');
        };
     });

     $('input, textarea').on('blur', function(){
       if($(this).attr('placeholder')){
            $(this).attr('placeholder', window.oldph);
         };
     }); 
});

Answer 18

ডেমো এখানে: jsfiddle

এটা চেষ্টা কর :

//auto-hide-placeholder-text-upon-focus
if(!$.browser.webkit){
$("input").each(
        function(){
            $(this).data('holder',$(this).attr('placeholder'));
            $(this).focusin(function(){
                $(this).attr('placeholder','');
            });
            $(this).focusout(function(){
                $(this).attr('placeholder',$(this).data('holder'));
            });

        });

}

Comments

পরিবর্তে place ("ইনপুট [স্থানধারক]") এর পরিবর্তে কেবলমাত্র ক্ষেত্র নির্বাচন করতে যেখানে একটি স্থানধারকের বৈশিষ্ট্য রয়েছে select

— সিলসস্টার

ফোকাসের বাইরে থাকাকালীন এটিই সর্বোত্তম উত্তর, সহজ এবং অন্যদের অপছন্দ করে

— জেগালার্ডো ২rd

Answer 19

ইনপুট জন্য

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }

টেক্সারিয়া জন্য

textarea:focus::-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; }

Answer 20

$("input[placeholder]").focusin(function () {
    $(this).data('place-holder-text', $(this).attr('placeholder')).attr('placeholder', '');
})
.focusout(function () {
    $(this).attr('placeholder', $(this).data('place-holder-text'));
});

Answer 21

$("input[placeholder]").each(function () {
    $(this).attr("data-placeholder", this.placeholder);

    $(this).bind("focus", function () {
        this.placeholder = '';
    });
    $(this).bind("blur", function () {
        this.placeholder = $(this).attr("data-placeholder");
    });
});

Answer 22

উপরের সবগুলি ছাড়াও আমার দুটি ধারণা রয়েছে।

আপনি প্যালসোল্ডারকে অনুকরণ করে এমন একটি উপাদান যুক্ত করতে পারেন j তারপরে জাভাস্ক্রিপ্ট ব্যবহার করে উপাদানটি দেখানো এবং লুকিয়ে রাখা নিয়ন্ত্রণ করে।

তবে এটি এত জটিল, অন্যটি ভাইয়ের সিএসএস নির্বাচক ব্যবহার করছে ust কেবল এইরকম:

.placeholder { position: absolute; font-size: 14px; left: 40px; top: 11px; line-height: 1; pointer-events: none; }
.send-message input:focus + .placeholder { display: none; } 

২৩৩৩৩, আমার কাছে ইংরেজি খুব খারাপ।

Comments

দয়া করে এই URL টি পরীক্ষা করে দেখুন আপনার সামগ্রীর গুণমানকে উপরে তুলতে এটি কার্যকর হবে;

— উইলি চেং

Answer 23

এই ফাংশন চেষ্টা করুন:

+ এটি ফোকাসে প্লেসহোল্ডারটি লুকায় এবং এটিকে অস্পষ্ট অবস্থায় ফিরিয়ে দেয়

+ এই ফাংশন স্থানধারক নির্বাচকের উপর নির্ভর করে, প্রথমে এটি স্থানধারক বৈশিষ্ট্যের সাহায্যে উপাদানগুলি নির্বাচন করে, ফোকাস করার ক্ষেত্রে একটি ফাংশন এবং ঝাপসা হওয়ার ক্ষেত্রে অন্যটি ট্রিগার করে।

ফোকাসের উপর: এটি উপাদানটিতে একটি বৈশিষ্ট্য "ডেটা-টেক্সট" যুক্ত করে যা স্থানধারক বৈশিষ্ট্য থেকে এর মান পায় তারপরে এটি স্থানধারক বৈশিষ্ট্যের মানটি সরিয়ে দেয় remove

অস্পষ্টতার সাথে: এটি স্থানধারকের মানটি ফিরিয়ে দেয় এবং ডেটা-পাঠ্য বৈশিষ্ট্য থেকে এটি সরিয়ে দেয়

<input type="text" placeholder="Username" />

$('[placeholder]').focus(function() {
    $(this).attr('data-text', $(this).attr('placeholder'));
    $(this).attr('placeholder', '');
  }).blur(function() {
      $(this).attr('placeholder', $(this).attr('data-text'));
      $(this).attr('data-text', '');
  });
});

আপনি যদি ইনপুট উপাদানটি পর্যবেক্ষণ করে পর্দার আড়ালে কী ঘটছে তা দেখতে আপনি আমাকে খুব ভালভাবে অনুসরণ করতে পারেন

Answer 24

আমি কৌণিক 5 এ একই জিনিস প্রয়োগ করেছি।

আমি স্থানধারককে সঞ্চয় করার জন্য একটি নতুন স্ট্রিং তৈরি করেছি

newPlaceholder:string;

তারপরে আমি ইনপুট বাক্সে ফোকাস এবং অস্পষ্ট ফাংশন ব্যবহার করেছি (আমি প্রাইম এনজি স্বতঃসম্পূর্ণ ব্যবহার করছি)।

উপরে স্থানধারক টাইপস্ক্রিপ্ট থেকে সেট করা হচ্ছে

দুটি ফাংশন যা আমি ব্যবহার করছি -

/* Event fired on focus to textbox*/
Focus(data) {
    this.newPlaceholder = data.target.placeholder;
    this.placeholder = '';
}
/* Event fired on mouse out*/
Blur(data) {
    this.placeholder = this.newPlaceholder;
}

Answer 25

কোনও সিএসএস বা জ্যাকুয়ারি ব্যবহার করার দরকার নেই। আপনি এটি সরাসরি HTML ইনপুট ট্যাগ থেকে করতে পারেন।

উদাহরণস্বরূপ , নীচের ইমেল বাক্সে, স্থানধারক পাঠ্যটি ভিতরে ক্লিক করার পরে অদৃশ্য হয়ে যাবে এবং বাইরে ক্লিক করা থাকলে পাঠ্যটি আবার উপস্থিত হবে।

<input type="email" placeholder="Type your email here..." onfocus="this.placeholder=''" onblur="this.placeholder='Type your email here...'">

Answer 26

/* Webkit */
[placeholder]:focus::-webkit-input-placeholder { opacity: 0; }
/* Firefox < 19 */
[placeholder]:focus:-moz-placeholder { opacity: 0; }
/* Firefox > 19 */
[placeholder]:focus::-moz-placeholder { opacity: 0; }
/* Internet Explorer 10 */
[placeholder]:focus:-ms-input-placeholder { opacity: 0; }

Comments

এই উত্তরটি পূর্বের উত্তরের মতো। আপনার যদি যুক্ত বা উন্নত করার কিছু থাকে তবে দয়া করে মূল উত্তরে একটি সম্পাদনার পরামর্শ দিন।

— জোনাথন