إدخال النص مع نص وصفي

Question

أنا أتساءل عما إذا كان هناك طريقة سهلة مع جافا سكريبت (بما في ذلك مسج, الذي نستخدمه على الموقع) وضع النص الوصفي في إدخال النص حتى ينقر المستخدم إلى نوع في النص الخاص.

على سبيل المثال أريد أن أضع كلمة " بحث " في إدخال النص (ويفضل في لون أفتح من المدخلات) حتى ينقر المستخدم الإدخال عندما يختفي يسمح لهم نوع في شروط البحث.

أنا لا أريد أن يكون في الواقع كلمة " بحث " أن قيمة إدخال النص على الرغم لأنه مهم إلى حد ما أنه يمكن للمستخدم البحث عن كلمة البحث.

كنت أفكر في المواقع المطلق <p> العنصر مع كلمة البحث على المدخلات إخفائه عندما (أو المدخلات) هو النقر.

ماذا تعتقد ؟ هذا فظيعة الضالين?

Answer 1

وأنا صدم مؤخرا في مسج نموذج مثال المساعد ان يفعل ذلك بالضبط ما تريد. الصفحة جيثب للمشروع هي هنا . مع أن البرنامج المساعد، يمكنك عرض قيمة نائبا من شأنها أن تتلاشى في نقرة فقط مع هذا:

و$('input#search').example('Search');

Answer 2

يمكنك تعيين القيمة الأولية الإدخال البحث "البحث" ثم إضافة onClick المستمع إلى إزالته.

$("input.search-term").one("click", function() { $(this).removeAttr("value"); });

لن تؤثر على قدرة المستخدم على البحث عن "بحث". هذا هو أنظف بكثير من النهج في محاولة للتحايل على <p> أو <label> العنصر على المدخلات.

تحرير: أنتم جميعا على حق تماما - إزالة قيمة كل نقرة هو الفقراء UX.هذا ما أحصل على الإجابة بسرعة.:) تحديث فقط إزالة القيمة الأولية.

Answer 3

قد ترغب في التحقق من ذلك:http://www.newmediacampaigns.com/page/nmcformhelper

أساسا ، HTML 5 يدعم نائبا سمة عناصر الإدخال:

<input type="text" placeholder="Your browser supports placeholder text" size=38>

بكت (كروم و سفاري) يدعم هذا الآن, ولكن على متصفحات أخرى مثل فايرفوكس وإنترنت إكسبلورر ، يمكنك استخدام هذا البرنامج النصي لمحاكاة تأثير استخدام جافا سكريبت عندما المتصفح لا يدعم HTML 5 الميزة.

Answer 4

لسنوات كان هناك "مشروع" الشعبية المعروفة باسم <قوية> العلامات. شبيبة ، أو مكتوبة orignally التي كتبها هارون Boodman من youngpup.net من العمر. والفكرة لا تزال حولها وهناك وجود href="http://simonwillison.net/static/2008/xtech/" rel="nofollow نسخة مسج أو حتى (عرض رقم 4).

Answer 5

<اقتباس فقرة>   

وأنا لا أريد أن يكون في الواقع كلمة 'بحث' تكون قيمة إدخال النص الرغم من ذلك، لأنه من المهم إلى حد ما يمكن للمستخدم البحث للبحث عن كلمة واحدة.

في هذه الحالة هل يمكن استخدام خلفية الصورة على المدخلات النص. هل يمكن أن تحدد في CSS ان: التركيز لا ينبغي أن يكون في الخلفية وينبغي أن يكون أن unfoucused ذلك. يعمل هذا الحل حتى إذا تم تعطيل جافا سكريبت.

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

Answer 6

وكنت أبحث عن هذا الحل منذ وقت ليس ببعيد، وجاء عبر <لأ href = "http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/" يختلط = "noreferrer نوفولو "> هذا

/**
* @author Remy Sharp
* @url http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/
*/

(function ($) {

$.fn.hint = function (blurClass) {
  if (!blurClass) { 
    blurClass = 'blur';
  }

  return this.each(function () {
    // get jQuery version of 'this'
    var $input = $(this),

    // capture the rest of the variable to allow for reuse
      title = $input.attr('title'),
      $form = $(this.form),
      $win = $(window);

    function remove() {
      if ($input.val() === title && $input.hasClass(blurClass)) {
        $input.val('').removeClass(blurClass);
      }
    }

    // only apply logic if the element has the attribute
    if (title) { 
      // on blur, set value to title attr if text is blank
      $input.blur(function () {
        if (this.value === '') {
          $input.val(title).addClass(blurClass);
        }
      }).focus(remove).blur(); // now change all inputs to title

      // clear the pre-defined text when form is submitted
      $form.submit(remove);
      $win.unload(remove); // handles Firefox's autocomplete
    }
  });
};

})(jQuery);


$(function(){ 
    // find all the input elements with title attributes
    $('input[title!=""]').hint();
});

Answer 7

وأود أن تفعل شيئا من هذا القبيل في مسج:

$("input.searchterm").click(function() { 
  var $input = $(this);
  if ($input.val() == "enter search term") $input.val("");
};

وسيكون للمستخدمين وبهذه الطريقة لا تفقد ما كتبته سابقا على النقر مرة أخرى. لن يؤدي إلا إلى مسح القيمة إذا كانت القيمة الافتراضية تعيين لحقل الإدخال.

Answer 8

للإشارة هذه التقنية تسمى في كثير من الأحيان بالماء.