ฉันจะทำให้กล่องข้อความ HTML แสดงคำใบ้เมื่อว่างได้อย่างไร

ฉันต้องการช่องค้นหาในหน้าเว็บของฉันเพื่อแสดงคำว่า "ค้นหา" ในตัวเอียงสีเทา เมื่อกล่องได้รับโฟกัสมันควรดูเหมือนกล่องข้อความเปล่า หากมีข้อความอยู่แล้วควรแสดงข้อความตามปกติ (สีดำไม่ใช่ตัวเอียง) สิ่งนี้จะช่วยให้ฉันหลีกเลี่ยงความยุ่งเหยิงได้โดยการนำฉลากออก

BTW นี่คือการค้นหาAjax ในหน้าดังนั้นจึงไม่มีปุ่ม

ตัวเลือกอื่นหากคุณยินดีที่จะใช้คุณสมบัตินี้เฉพาะเบราว์เซอร์ที่ใหม่กว่าก็คือการใช้การสนับสนุนที่เสนอโดยแอตทริบิวต์ตัวยึดตำแหน่งของ HTML 5 :

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

หากไม่มีสไตล์ใด ๆ ใน Chrome จะมีลักษณะดังนี้:

คุณสามารถลองสาธิตออกมาที่นี่และในHTML5 ตัวยึดตำแหน่งจัดแต่งทรงผมด้วย CSS

อย่าลืมตรวจสอบความเข้ากันได้ของเบราว์เซอร์ของคุณสมบัตินี้ มีการเพิ่มการสนับสนุนใน Firefox ใน 3.7 Chrome ใช้ได้ Internet Explorer เพิ่มการสนับสนุนใน 10 เท่านั้นหากคุณกำหนดเป้าหมายเบราว์เซอร์ที่ไม่รองรับตัวยึดตำแหน่งอินพุตคุณสามารถใช้ปลั๊กอินjQuery ที่เรียกว่าjQuery HTML5 Placeholderจากนั้นเพิ่มโค้ด JavaScript ต่อไปนี้เพื่อเปิดใช้งาน

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

ที่รู้จักกันว่าเป็นลายน้ำกล่องข้อความและจะทำผ่าน JavaScript

• http://naspinski.net/post/Text-Input-Watermarks-using-Javascript-(IE-Compatible).aspx

หรือถ้าคุณใช้ jQuery เป็นวิธีที่ดีกว่ามาก:

• http://digitalbush.com/projects/watermark-input-plugin/
• หรือcode.google.com/p/jquery-watermark

คุณสามารถกำหนดตัวยึดตำแหน่งโดยใช้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">

คุณสามารถเพิ่มและลบคลาส CSS พิเศษและแก้ไขค่าอินพุตonfocus/ onblurด้วย JavaScript:

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

วิธีที่ดีที่สุดคือการวางสายกิจกรรม JavaScript ของคุณโดยใช้ไลบรารี JavaScript บางประเภทเช่นjQueryหรือYUIและใส่รหัสของคุณในไฟล์. js-external

แต่ถ้าคุณต้องการโซลูชันที่รวดเร็วและสกปรกนี่คือโซลูชัน 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'}" />

อัปเดต : เพิ่มการระบายสีตามที่ขอ

ฉันโพสต์คำตอบสำหรับสิ่งนี้บนเว็บไซต์ของฉันเมื่อไม่นานมานี้ หากต้องการใช้งานให้นำเข้า.jsไฟล์เดียว:

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

จากนั้นใส่คำอธิบายประกอบอินพุตใด ๆ ที่คุณต้องการให้มีคำใบ้กับคลาส CSS hintTextbox:

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

ข้อมูลเพิ่มเติมและตัวอย่างที่มีอยู่ที่นี่

นี่คือตัวอย่างการทำงานกับแคชไลบรารีของ Google Ajax และเวทมนตร์ jQuery

นี่จะเป็น CSS:

<style type="text/stylesheet" media="screen">
    .inputblank { color:gray; }  /* Class to use for blank input */
</style>

นี่จะเป็นรหัส JavaScript:

<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 และ jQuery

ตอนนี้มันง่ายมาก ใน html เราสามารถให้แอตทริบิวต์ตัวยึดตำแหน่งสำหรับองค์ประกอบอินพุต

เช่น

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

ตรวจสอบรายละเอียดเพิ่มเติมได้ที่: http://www.w3schools.com/tags/att_input_placeholder.asp

สำหรับผู้ใช้ jQuery: ลิงก์ jQuery ของ naspinski ดูเหมือนจะเสียหาย แต่ลองทำสิ่งนี้: http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/

คุณจะได้รับการสอนปลั๊กอิน jQuery ฟรีเป็นโบนัส :)

ฉันพบ jQuery plugin jQuery Watermarkจะดีกว่าที่ระบุไว้ในคำตอบยอดนิยม ทำไมถึงดีกว่า เพราะมันรองรับช่องใส่รหัสผ่าน นอกจากนี้การตั้งค่าสีของลายน้ำ (หรือแอตทริบิวต์อื่น ๆ ) นั้นง่ายเหมือนการสร้างการ.watermarkอ้างอิงในไฟล์ CSS ของคุณ

สิ่งนี้เรียกว่า "ลายน้ำ"

ฉันพบปลั๊กอินลายน้ำ jQuery jQueryซึ่งไม่เหมือนคำตอบแรกไม่จำเป็นต้องตั้งค่าเพิ่มเติม (คำตอบเดิมต้องมีการโทรพิเศษก่อนที่จะส่งแบบฟอร์ม)

ใช้jQuery Form Notifier - เป็นหนึ่งในปลั๊กอิน jQuery ที่ได้รับความนิยมมากที่สุดและไม่ได้รับความผิดพลาดจากข้อเสนอแนะอื่น ๆ ของ jQuery ที่นี่ (ตัวอย่างเช่นคุณสามารถกำหนดลายน้ำได้อย่างอิสระโดยไม่ต้องกังวลว่าจะถูกบันทึกไว้ใน ฐานข้อมูล)

jQuery Watermark ใช้ CSS สไตล์เดียวบนอิลิเมนต์แบบฟอร์มโดยตรง (ฉันสังเกตเห็นว่าคุณสมบัติขนาดตัวอักษร CSS ที่ใช้กับลายน้ำนั้นส่งผลต่อกล่องข้อความด้วย - ไม่ใช่สิ่งที่ฉันต้องการ) เครื่องหมายบวกกับ jQuery Watermark คือคุณสามารถลากข้อความลงในช่อง (jQuery Form Notifier ไม่อนุญาตสิ่งนี้)

อีกอันที่คนอื่นแนะนำ (คนที่ digitalbrush.com) จะส่งค่าลายน้ำไปยังแบบฟอร์มของคุณโดยบังเอิญดังนั้นฉันขอแนะนำอย่างยิ่ง

ใช้ภาพพื้นหลังเพื่อแสดงข้อความ:

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

จากนั้นสิ่งที่คุณต้องทำคือตรวจจับvalue == 0และใช้คลาสที่เหมาะสม:

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

และรหัส jQuery JavaScript มีลักษณะดังนี้:

jQuery(function($)
{
    var target = $("input.foo");
    target.bind("change", function()
    {
        if( target.val().length > 1 )
        {
            target.addClass("fooempty");
        }
        else
        {
            target.removeClass("fooempty");
        }
    });
});

คุณสามารถให้กล่องอ่าน "ค้นหา" ได้ง่ายจากนั้นเมื่อเปลี่ยนโฟกัสไปที่กล่องข้อความจะถูกลบออก บางสิ่งเช่นนี้

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

เมื่อเพจโหลดครั้งแรกให้มีการค้นหาปรากฏในกล่องข้อความโดยมีสีเทาเป็นสีถ้าคุณต้องการให้เป็น

เมื่อกล่องอินพุตได้รับโฟกัสเลือกข้อความทั้งหมดในกล่องค้นหาเพื่อให้ผู้ใช้สามารถเริ่มพิมพ์ได้ซึ่งจะลบข้อความที่เลือกในกระบวนการ วิธีนี้จะใช้งานได้ดีหากผู้ใช้ต้องการใช้ช่องค้นหาเป็นครั้งที่สองเนื่องจากพวกเขาไม่ต้องเน้นข้อความก่อนหน้าด้วยตนเองเพื่อลบ

<input type="text" value="Search" onfocus="this.select();" />

ฉันชอบทางออกของ "Knowledge Chikuse" - เรียบง่ายและชัดเจน จำเป็นต้องเพิ่มการเรียกเพื่อเบลอเมื่อโหลดหน้าพร้อมซึ่งจะตั้งค่าสถานะเริ่มต้น:

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

คุณต้องการมอบหมายบางสิ่งเช่นนี้ให้กับออนโฟกัส:

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

และนี่เพื่อ onblur:

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

(คุณสามารถใช้บางสิ่งที่ฉลาดกว่าเล็กน้อยเช่นฟังก์ชั่นกรอบงานเพื่อทำการสลับคลาสหากคุณต้องการ)

ด้วย CSS บางอย่างเช่นนี้:

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

ฉันกำลังใช้โซลูชัน Javascript แบบบรรทัดเดียวที่ใช้งานได้ดี นี่คือตัวอย่างทั้งสำหรับกล่องข้อความและสำหรับ textarea:

    <textarea onfocus="if (this.value == 'Text') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Text'; }">Text</textarea>

    <input type="text" value="Text" onfocus="if (this.value == 'Text') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Text'; }">

เฉพาะ "ข้อเสีย" คือการตรวจสอบความถูกต้องที่ $ _POST หรือในการตรวจสอบความถูกต้องของ Javascript ก่อนที่จะทำสิ่งใด ๆ ที่มีค่าของฟิลด์ หมายความว่าตรวจสอบว่าค่าของฟิลด์ไม่ใช่ "ข้อความ"

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

แท็ก Html แบบง่าย 'จำเป็นต้องใช้' มีประโยชน์

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

มันระบุว่าช่องใส่จะต้องกรอกก่อนที่จะส่งแบบฟอร์มหรือกดปุ่มส่ง นี่คือตัวอย่าง

ผู้ใช้ AJAXToolkit จากhttp://asp.net