تعيين القيمة الافتراضية لحقل البحث - من فضلكم ساعدونا!

Question

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

وحاولت هذه

<input autocomplete="off" class="" id="searchq" name="searchq" onblur="if (this.value == '') { this.value='Search'; jQuery(this).addClass('blank'); };" onfocus="if (this.value == 'Search') { this.value=''; jQuery(this).removeClass('blank'); };" type="text" value="" />

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

واعتقد انه لديه شيء للقيام مع و onblur. أي أفكار؟

وشكرا!

Answer 1

وهذا هو المعروف باسم علامة مائية. يمكنك الاطلاع على http://digitalbush.com/projects/watermark-input-plugin/ للحصول على مثال

Answer 2

وهناك فكرة أخرى هي وضع النائبة في أنواع المدخلات الخاصة بك: (لاحظ أن هذا هو HTML5).

و<input type=text placeholder="Default text here"/>

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

Answer 3

وفقط لانه يعطي القيمة الافتراضية 'البحث' ضمنية، كما في

<input ... type="text" value="Search" />

Answer 4

ويبدو أنك تحتاج فقط إلى تعيين القيمة الأولية لSearch، مباشرة في العلامة المدخلات، مثل ذلك:

<input autocomplete="off" class="blank" id="searchq" name="searchq" onblur="if (this.value == '') { this.value='Search'; jQuery(this).addClass('blank'); };" onfocus="if (this.value == 'Search') { this.value=''; jQuery(this).removeClass('blank'); };" type="text" value="Search" />

لاحظ أننا أيضا تعيين الدرجة الأولى لblank كذلك.

Answer 5

ولقد وجدت مشكلة، خطأي: و onblur يسمى، عندما يقوم المستخدم بالنقر فوق مكان آخر. يسمح ONLOAD فقط للجسم العلامات وFRAMESET. الحل هو تعيين القيمة الافتراضية في مكان ما جانب الخادم (بالنسبة لي في application_controller إذا قدم أي مصطلح البحث).

وعلى أي حال شكرا!

Answer 6

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

<input autocomplete="off" class="blank" ....

Answer 7

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

function ClearDefault(item) {
    // clear the default value of a form element
    if (item.defaultValue == undefined)
        item.defaultValue = item.value;
    if (item.defaultValue == item.value)
        item.value = '';
} // ClearDefault

function SetDefault(item) {
    // if item is empty, restore the default value
    if (item.value == '')
        item.value = item.defaultValue;
} // SetDefault

$(document).ready(function() {
    $(".cleardefault")
        .mouseover(function(){
            ClearDefault(this);
        })
    $(".setcleardefault")
        .mouseover(function(){
            ClearDefault(this);
        })
        .mouseout(function(){
            SetDefault(this);
        });
    /*
    */
});