مشاهدة 'المخفي' سبيل المثال نص في حقل، ومن ثم مسحها و onblur

Question

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

وأريد أن استخدام هذه البيانات لتوفير سبيل المثال المجال لنموذج ويب.

تركيب مسج سيكون من الأفضل أن جافا سكريبت عادي، ولكن JS العادي يكون على ما يرام أيضا.

وبفضل SO خلية العقل!

Answer 1

<style type='text/css'>
      input #ghost { color: #CCC; }
      input #normal { color: #OOO; }
</style>

<script type='text/javascript'> 
    function addTextHint(elem, hintText)
    {       
        if (elem.value == '')   
        {       
            elem.value = hintText;
            elem.style.className = 'ghost';
        }

        elem.onfocus = function ()
        {           
            if (elem.value == hintText)         
            {
                elem.value = '';
                elem.className = 'normal';
            }
        }

        elem.onblur = function ()
        {
            if (elem.value == '')
            {
                elem.value = hintText;
                elem.className = 'ghost';
            }
        }           
    }

    addTextHint(document.getElementById('foobar'),'Google');
</script>

ومجرد جلد هذا بالنسبة لك. سوف مسج جعله أصغر وأنا متأكد، لكن أنا لا يستخدمونه.

Answer 2

ويستخدم هذا الأسلوب حتى يشيع أن أنها الآن تدعم بشكل واضح في المواصفات HTML من خلال السمة نائبا للعلامة الإدخال:
نائب HTML سمة

انها دعمت بالفعل في معظم المتصفحات والأكبر سنا هناك مسج المساعد توفير تنفيذ الرقائق التي يمكن أن يمكن العثور rel="nofollow"> href="https://github.com/mathiasbynens/jquery-placeholder" .

لتصفيف نص العنصر النائب، الرجاء الرجوع إلى (وتشمل الأمثلة الحية):
HTML5 عنصر نائب التصميم مع CSS

Answer 3

وهناك طريقة أخرى لاستخدام بعض CSS، وخلق صورة مع النص الخلفية التي تريد، وحددت أن كصورة خلفية مربع النص، ثم عندما يحصل مربع النص التركيز هل يمكن تبديل أساليب لإزالة تلك الصورة الخلفية.

Answer 4

وتنفيذ مسج

<input type="text" id = "textField" value="Google" class="RegularText GhostText" />

<style>
.GhostText{color:#DDD}
.RegularText{color:#CCC}
</style>

<script type="text/javascript" language="javascript">
$("#textField").blur(function(e){
    if ($.trim(e.target.value) == "") {
        e.target.value = e.target.defaultValue;
        e.target.toggleClass("GhostText");
    }
});
$("#textField").focus(function(e){
    if ($.trim(e.target.value) == e.target.defaultValue) {
        e.target.value = "";
        e.target.toggleClass("GhostText");
    }
});
</script>

Answer 5

لماذا القوائم الخاصة بك؟ استخدام هذا البرنامج المساعد .

Answer 6

  $(selector).text('Google'); 
  $(selector).click(function(){
    $(this).text('');
  });

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

وأنا لم تختبر هذا، ولكن ينبغي لها أن تعمل.