قيمة تلاشي المدخلات والنص

Question

أريد أن أكون قادرًا على فعل شيء مثل

<input type="text" name="txtField" value="" title="input your text" />
<textarea name="areaField" title="input your long text"></textarea>

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

يمكن أن أتوصل إلى جافا سكريبت والاستخدام onblur و onfocus, ، لكن هذا سيكون مزعجًا وآمل أن يكون غير ضروري. ويفضل أن أقوم بتعيين وظيفة واحدة فقط لكل إدخال ونص داخل أي ملف معين ، لذلك كل ما أحتاج إلى القيام به هو إعدادها title.

السؤال الأول: ما اسم هذا؟

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

Answer 1

إذا كنت موافقًا على العمل فقط في المتصفحات الأحدث ، فيمكنك استخدام placeholder ينسب في حقل النص ، لتزويد عنصر نائب يختفي عندما تركز وتظهر مرة أخرى عند طمسك. يمكنك العثور على مزيد من المعلومات في الغوص في HTML5.

<input type="text" name="txtField" value="" placeholder="input your text" />

إذا كنت تريد أن تعمل في المتصفحات القديمة ، فمن المحتمل أن تضطر إلى تنفيذ العنصر النائب بنفسك ، في JavaScript على سبيل المثال. يمكنك العثور على كل ما لديك input و textarea عناصر باستخدام document.getElementsByTagName وأضف onfocus و onblur معالجات لكل من يستخدمون أحداث دوم.

Answer 2

حسنًا ، بفضل إجابة براين المثالية ، هذا هو الرمز الذي توصلت إليه. استغرقني وقتًا طويلاً بما يكفي لجعله يعمل:

<form>
  <input type="text" name="txtField" value="" placeholder="input your text" />
  <textarea name="areaField" placeholder="input your long text"></textarea>
</form>

<script type="text/javascript">
(function() {
    ie_placeholder(document.getElementsByTagName('input'));
    ie_placeholder(document.getElementsByTagName('textarea'));
    function ie_placeholder (fields) {
        for (var i = 0; i < fields.length; i++) {
            var field = fields[i];
            field.onfocus = function () {
                if (this.value == this.placeholder) {
                    this.style.color = '';
                    this.value = '';
                }
            };
            field.onblur = function () {
                if (this.value == '' && this.placeholder != null) {
                    this.style.color = 'silver';
                    this.value = this.placeholder;
                }
            };
            field.onblur();
        }
    }
})();
</script>

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