كيفية إنشاء تسمية داخل عنصر ؟

StackOverflow https://stackoverflow.com/questions/781473

  •  13-09-2019
  •  | 
  •  

سؤال

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

أعلم أنها خدعة شائعة للغاية، لكنني لا أعرف كيف أفعل ذلك ..

ما هو أبسط / حلا أفضل؟

هل كانت مفيدة؟

المحلول 

<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" type="text" value="search">

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

نصائح أخرى

إذا كنت تستخدم HTML5، يمكنك استخدام placeholder ينسب.

<input type="text" name="user" placeholder="Username">

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

من السهل التنفيذ وتتحول بشكل جيد لقراء الشاشة والمستخدمين بدون جافا سكريبت.

إلقاء نظرة على الأمثلةتين هنا:http://attardi.org/labels/

عادة ما أستخدم الطريقة الثانية (LABELS2) على النماذج الخاصة بي.

النهج المشترك هو استخدام القيمة الافتراضية كسمية، ثم قم بإزالته عند تحقيق الحقل التركيز.

أنا حقا أكره هذا النهج لأنه يحتوي على آثار إمكانية الوصول وسرعة الاستخدام.

بدلا من ذلك، سأبدأ باستخدام عنصر قياسي بجوار الحقل.

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

  • موقف نسبيا div يحتوي على الإدخال والتسمية
  • وضع العلامة تماما
  • وضع الإدخال تماما على رأس الملصق
  • قم بإزالة حدود الإدخال وتعيين لون الخلفية إلى شفافة

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

كلما ارتكب المدخلات التركيز، قم بتعيين هذه الفئة.

ستستخدم ورقة الأنماط اسم Classname في محدد لإخفاء الملصق (باستخدام Detwork-indent: -9999px؛ عادة).

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

لقد قمت بتجميع الحلول التي اقترحتها ory Walker مع امتدادات RFAEL وكانت النموذج واحد @ retex ساحرة معقدة بعض الشيء بالنسبة لي وتوصل إلى حل نأمل

مقاومة للخطأ مع JavaScript و CSS معطل.

يتم التعامل مع اللون الخلفية لحقل النموذج لإظهار / إخفاء الملصق.

<head>

<style type="text/css">
<!--
    input {position:relative;background:transparent;} 
-->
</style>

<script>
    function labelPosition() {
        document.getElementById("name").style.position="absolute"; 
            // label is moved behind the textfield using the script, 
            // so it doesnt apply when javascript disabled
    }
</script>

</head>
<body onload="labelPosition()">

<form>
        <label id="name">Your name</label>
        <input type="text" onblur="if(this.value==''){this.style.background='transparent';}" onfocus="this.style.background='white'">
</form>

</body>

عرض البرنامج النصي في العمل: http://attr.co.uk/work/form_label.html.

<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" onblur="if (this.value=='') this.value = 'search'" type="text" value="search">

إضافة حدث OnBlur أيضا.

عندما تبدأ الكتابة، ستختفي. إذا كانت فارغة ستظهر مرة أخرى.

        <%= f.text_field :user_email,:value=>"",:placeholder => "Eg:abc@gmail.com"%>

أبسط طريقة ...

يرجى استخدام moryholder.js أعمالها في جميع المتصفحات ومن السهل جدا على المتصفحات المتوافقة مع HTML5 http://jamesallardice.github.io/placeLackers.js/

تلميح واحد حول خاصية HTML العنصر النائب والعلامة TextArea., ، يرجى التأكد من عدم وجود أي مساحة بين <textarea> و </textarea>, ، وإلا فإن العنصر النائب لا يعمل، على سبيل المثال:

<textarea id="inputJSON" spellcheck="false" placeholder="JSON response string" style="flex: 1;"> </textarea>

هذا لن يعمل، لأن هناك مساحة بين ...

استخدم هذا

نمط:

<style type="text/css">
    .defaultLabel_on { color:#0F0; }
    .defaultLabel_off { color:#CCC; }
</style>

لغة البرمجة:

جافا سكريبت:

function defaultLabelClean() {
    inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++)  {
        if (inputs[i].value == inputs[i].getAttribute("innerLabel")) {
            inputs[i].value = '';
        }
    }
}

function defaultLabelAttachEvents(element, label) {
    element.setAttribute("innerLabel", label);
    element.onfocus = function(e) {
        if (this.value==label) {
            this.className = 'defaultLabel_on';
            this.value = '';
        }
    }
    element.onblur = function(e) {
        if (this.value=='') {
            this.className = 'defaultLabel_off';
            this.value = element.getAttribute("innerLabel");
        }
    }

    if (element.value=='') {
        element.className = 'defaultLabel_off';
        element.value = element.getAttribute("innerLabel");
    }
}


defaultLabelAttachEvents(document.getElementById('MYID'), "MYLABEL");

فقط تذكر أن استدعاء الدالة DefaultLabelclean () قبل إرسال النموذج.

عمل جيد

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

<input type="text" placeholder="Your descriptive text goes here...">



سيكون النص الافتراضي Gray-Ish وعند النقر فوقه، سوف يختفي!

أعتقد أنه من الجيد الحفاظ على الملصق وعدم استخدام العنصر النائب كما ذكر أعلاه. من الجيد ل UX كما هو شرح هنا:https://www.smashingmagazine.com 2010/2018/03/ux-contact-fulsss-Conversionss/

هنا مثال مع تسمية داخل حقول الإدخال: Codepen.io/jdax/pen/mebjna

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1;" />
    <meta http-equiv="Expires" content="Fri, Jan 1 1981 08:00:00 GMT" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <style type="text/css" >

        input.searcher
        {
            background-image: url(/images/search_back.png);
            background-repeat: no-repeat;
            background-attachment: scroll;
            background-x-position: left;
            background-y-position: center;
        }

    </style>

    <script type="text/javascript" src="/logist/include/scripts/js/prototype.js" ></script>
</head>
<body>
    <input type="text" id="q" name="q" value="" />

    <script type="text/javascript" language="JavaScript" >
    //  <![CDATA[
        function f(e){
            $('q').removeClassName('searcher');
        }

        function b(e){
            if ( $F('q') == '' )
            {
                $('q').addClassName('searcher');
            }
        }

        Event.observe( 'q', 'focus', f);
        Event.observe( 'q', 'blur', b);
        Event.observe( window, 'load', b);

    //  ]]>
    </script>
</body>
</html>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top