كيف يمكنني جعل HTML مربع النص تظهر تلميحا عندما فارغة ؟

Question

أريد مربع البحث على بلدي صفحة الويب لعرض كلمة "البحث" في الرمادي المائل.عند مربع يتلقى التركيز ، ينبغي أن تبدو وكأنها مجرد فارغة في مربع النص.إذا كان هناك بالفعل نص في ذلك ، ينبغي أن عرض النص عادة (الأسود غير مائل).هذا سوف يساعد علي تجنب الفوضى من خلال إزالة التسمية.

راجع للشغل, هذه الصفحة اياكس البحث لذا فإنه لا يوجد لديه زر.

Answer 1

خيار آخر, إذا كنت سعيدا أن هذه الميزة فقط على أحدث المتصفحات ، هو استخدام الدعم المقدم من HTML 5 نائبا السمة:

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

في غياب أي من الأساليب ، في كروم هذا يبدو مثل:

يمكنك محاولة العروض خارج هنا و في نائب HTML5 التصميم مع CSS.

تأكد من التحقق من التوافق المتصفح من هذه الميزة.الدعم في فايرفوكس أضيف في 3.7.الكروم هو بخير.Internet Explorer فقط إضافة دعم في 10.إذا كنت تستهدف متصفح لا يدعم الإدخال النائبة, يمكنك استخدام البرنامج المساعد مسج يسمى مسج نائب HTML5, ثم فقط إضافة التالية شفرة جافا سكريبت لتمكينه.

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

Answer 2

هذا هو المعروف باسم مربع نص العلامة المائية ، ويتم ذلك عن طريق جافا سكريبت.

• http://naspinski.net/post/Text-Input-Watermarks-using-Javascript-(أي متوافقة).aspx

أو إذا كنت تستخدم مسج, طريقة أفضل بكثير:

• http://digitalbush.com/projects/watermark-input-plugin/
• أو code.google.com/p/jquery-watermark

Answer 3

يمكنك تعيين نائبا باستخدام placeholder السمة في HTML (دعم المتصفح).على font-style و color يمكن تغيرت مع CSS (على الرغم من دعم المتصفح محدودة).

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">

Answer 4

يمكنك إضافة وإزالة خاصة فئة CSS وتعديل قيمة المدخلات 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...'; }">

ثم تحديد تلميح فئة مع التصميم الذي تريده في CSS الخاص بك على سبيل المثال:

input.hint {
    color: grey;
}

Answer 5

فإن أفضل طريقة هي أن الأسلاك الخاصة بك جافا سكريبت الأحداث باستخدام نوع من مكتبة جافا سكريبت مثل مسج أو YUI ووضع الكود الخاص بك في الخارجية .js-الملف.

ولكن إذا كنت تريد سريعة وقذرة الحل هذا هو HTML مضمنة-الحل:

<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'}" />

تحديث:وأضاف المطلوبة تلوين الاشياء.

Answer 6

نشرت لي حل هذا على موقع الويب الخاص بي منذ بعض الوقت.لاستخدامه, استيراد واحدة .js ملف:

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

ثم علق مهما المدخلات كنت تريد أن يكون لها تلميحات مع فئة CSS hintTextbox:

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

المزيد من المعلومات على سبيل المثال تتوفر هنا.

Answer 7

وإليك المثال وظيفية مع جوجل اياكس مكتبة ذاكرة التخزين المؤقت وبعض مسج السحر.

هذا سيكون CSS:

<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>

وهذا سيكون HTML:

<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 في مسج.

Answer 8

الآن أصبح من السهل جدا.في html ونحن يمكن أن تعطي نائبا سمة المدخلات عناصر.

على سبيل المثال

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

تحقق لمزيد من التفاصيل :http://www.w3schools.com/tags/att_input_placeholder.asp

Answer 9

بالنسبة مسج المستخدمين:naspinski هو مسج وصلة مكسورة يبدو, ولكن هذه محاولة واحدة:http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/

يمكنك الحصول على البرنامج المساعد مسج الحرة التعليمي على سبيل المكافأة.:)

Answer 10

لقد وجدت البرنامج المساعد مسج مسج مائية أن يكون أفضل من واحد في قائمة أفضل إجابة.لماذا أفضل ؟ لأنه يدعم كلمة المرور حقول الإدخال.أيضا تحديد لون مائية (أو سمات أخرى) هو سهلا كما خلق .watermark المرجعية في ملف CSS.

Answer 11

وهذا ما يسمى "العلامة المائية".

لقد وجدت البرنامج المساعد مسج مسج مائية والتي بخلاف الجواب الأول ، لا يتطلب إعداد إضافي (الأصلي الجواب يحتاج أيضا دعوة خاصة من قبل إرسال النموذج).

Answer 12

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

مسج مائية يستخدم واحد نمط CSS مباشرة على شكل عناصر (لقد لاحظت أن CSS font-size خصائص تطبيق علامة مائية أثرت أيضا على مربعات النص ليس ما أردت).زائد مع مسج العلامة المائية يمكنك سحب وإسقاط النص في مجالات (مسج شكل المخطر لا يسمح بذلك).

اقترح أحد آخر من قبل البعض الآخر (واحد في digitalbrush.com) ، قصد تقديم قيمة العلامة المائية إلى النموذج الخاص بك ، لذا نوصي بشدة ضد ذلك.

Answer 13

استخدام صورة الخلفية لعرض النص:

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

ثم كل ما عليك القيام به هو الكشف عن value == 0 وتطبيق الطبقة الصحيحة:

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

و جافا سكريبت مسج كود تبدو مثل هذا:

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

أنا أحب حل "المعرفة Chikuse" - بسيطة وواضحة.تحتاج فقط إلى إضافة الدعوة إلى طمس عند تحميل الصفحة جاهزة والتي سوف تحدد الحالة الأولية:

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

Answer 17

تريد تعيين شيئا من هذا القبيل إلى onfocus:

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

و هذا onblur:

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

(يمكنك استخدام شيئا قليلا ذكاء ، مثل إطار وظيفة للقيام classname تبديل إذا كنت تريد.)

مع بعض CSS مثل هذا:

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

Answer 18

$('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 19

Html بسيطة 'مطلوب' الوسم مفيدة.

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

Answer 20

المستخدم AJAXToolkit من http://asp.net