كيف يمكنني تنفيذ علامات مائية تشبه Stack Overflow في النماذج؟

Question

أتذكر رؤية برنامج تعليمي في مكان ما يتحدث عن كيفية تصميم نماذج الإدخال الخاصة بك بطريقة أكثر "قابلة للاستخدام".

بشكل أساسي، لديك قيمة عنصر نائب وعندما تقوم بإدخال الإدخال، فإنه يخفي التلميح إذا جاز التعبير.

الآن، فقط لنكون واضحين:لا أريد أن يختفي التلميح (نص قيمة العنصر النائب) عند التركيز، بل أريد أن يصبح أخف عندما أبدأ في كتابة شيء ما لأول مرة.أمثلة جيدة:

• تحقق من النماذج على خنزير الأرض.هذا هو بالضبط ما أرغب في الحصول على نماذج الإدخال الخاصة بي.

• Stack Overflow الخاص بنا - عندما تحاول طرح سؤال، عند النقر داخل أي نموذج إدخال، فإنه لا يخفي النص على الفور.ترى المؤشر الخاص بك وكذلك التلميح.ولكن عندما تبدأ في الكتابة، فإنه يخفي التلميح.(أفضل أن يكون لونه أفتح بكثير بدلاً من إخفاءه معًا، كما هو الحال في مثال Aardvark أعلاه.)

أتذكر بوضوح شديد أنني قرأت برنامجًا تعليميًا في مكان ما على interwebz يتضمن هذا المطلب بالضبط، ولكنني نسيت أن أضع إشارة مرجعية عليه.

أي اقتراحات/روابط؟

[تحديث:لقد عثرت مؤخرًا على مكون إضافي لـ jQuery التسميات الميدانية هذا يفعل بالضبط ما أريد.أيضًا، إليك الرابط لتحسين نفس البرنامج المساعد.]

Answer 1

قد ترغب في البدء من هذا:

<input type="text" value="Your Hint Here"
       onFocus="if (this.value == 'Your Hint Here') this.style.color = '#ccc';"
       onKeyDown="if (this.value == 'Your Hint Here') {  
                      this.value = ''; this.style.color = '#000'; }"> 

ربما ينبغي عليك تعديل ما ورد أعلاه لاستخدام وظائف JavaScript بطريقة لا تكرر سلسلة التلميحات ثلاث مرات، ولكن آمل أن يساعدك هذا في الاتجاه الصحيح.

لقد لاحظت أيضًا أن نماذج "انضم الآن" موجودة في فارك.كوم قم أيضًا بتعيين موضع المؤشر على بداية مربع النص بدلاً من تركه في النهاية.قد يكون هذا أمرًا صعبًا بعض الشيء لجعله يعمل عبر المتصفحات، ولكن قد ترغب في التحقق من الحل المقترح في المقالة التالية عن طريق جوش ستودولا:

• تحديد موضع المؤشر في Textbox أو TextArea باستخدام Javascript

Answer 2

HTML5 لديه placeholder يصف, ، والتي تم تصميمها لهذه المهمة بالذات.

فقط WebKit (محرك العرض المستخدم في Safari وGoogle Chrome) يدعمه حتى الآن.ستحتاج إلى نسخة احتياطية من JavaScript مثل أداة Daniel عندما لا يكون العنصر النائب مدعومًا.

إنه أمر تافه تحقق من وجود placeholder الدعم في جافا سكريبت.

Answer 3

لا يمكن أن يحتوي حقل الإدخال على نص افتراضي ونص يدخله المستخدم في نفس الوقت.الطريقة الوحيدة الممكنة لتحقيق ما تطلبه بالضبط هي الحصول على صورة خلفية في حقول الإدخال مع صورة تحتوي على النص الافتراضي الذي تريد عرضه ولكني للغاية لا نوصي بهذا لأن طبقتين من النص ستكونان مربكتين جدًا للمستخدم.الطريقة الأكثر شيوعًا لتحقيق ذلك (وما يتم فعله على موقع المثال الخاص بك vark.com) هي استخدام ركز طريقة مسح النص:

$('#my_input').focus(function() {
  if($(this).val() == 'default text') {
    $(this).val('');
  }
});

لتحقيق ذلك بالطريقة التي يستخدمها StackOverflow (ونموذج الاشتراك في Vark.com) يمكنك استخدام نفس الطريقة مع زر أسفل حدث:

$('#my_input').keydown(function() {
  if($(this).val() == 'default text') {
    $(this).val('');
  }
});

لتحقيق تغيير اللون عند التركيز وتوضيح النص عند الضغط على المفتاح، سيكون الأمر كما يلي:

// set text to grey on focus
$('#my_input').focus(function() {
  if($(this).val() == 'default text') {
    $(this).css('color', '#999999');
  }
});

// set text to black and clear default value on key press
$('#my_input').keydown(function() {
  if($(this).val() == 'default text') {
    $(this).val('');
    $(this).css('color', '#000000');
  }
});

Answer 4

ردًا على مشاركة @Paul، لاحظت سلوك HTML5 يعمل العنصر النائب بشكل غريب على محاكي Android الخاص بي.يبدو العنصر النائب رائعًا حتى تنقر عليه ويصبح أسود عندما يكون المؤشر على يمين الكلمة.من المؤكد أنه إذا كتبته فسوف يختفي، لكنه ليس أمرًا بديهيًا.لذلك كتبت بعض مسج لإصلاحها (أين شارة HTML5/jQuery الخاصة بي؟)

$(document).ready(function() {
    $('input[placeholder]').focus(function() {
        if (!$(this).val()) $(this).val('');
    });
});

Answer 5

كتبت هذا المثال والتي أسميتها - لعدم وجود اسم أفضل - بالعناصر النائبة الدائمة.

يتطلب الأمر المزيد من العلامات، أ div التفاف أ label و input, ، ولكن هذا يحل الكثير من المشكلات الأخرى (مثل إدخال العناصر النائبة في بيانات النموذج أو عدم عمل حقول كلمة المرور) ويكون الترميز الفعلي واضحًا جدًا للقراءة.ينتهي بك الأمر بشيء مثل هذا:

<div class="input-wrapper">
    <label for="id_username">Username</label>
    <input id="id_username" type="text" name="username">
</div>

وبعد تضمين CSS وJS، فإنه يعمل فقط.