HTML/CSS Tạo hộp văn bản có văn bản màu xám và biến mất khi tôi nhấp để nhập thông tin, làm cách nào?

Question

Làm cách nào để tạo một hộp văn bản có nội dung được tô xám và khi tôi nhấp vào hộp văn bản để nhập văn bản, phần màu xám, nó biến mất và cho phép tôi nhập văn bản mong muốn?

Ví dụ:

Hộp văn bản "First Name". Các từ "First Name" nằm trong hộp văn bản được tô xám, khi tôi nhấp vào, những từ đó biến mất và tôi viết tên của tôi trong đó.

Answer 1

Câu trả lời này cho thấy một cách tiếp cận trước HTML5. Vui lòng xem Psytronic's answer để có giải pháp hiện đại sử dụng thuộc tính placeholder.

---

HTML:

<input type="text" name="firstname" title="First Name" style="color:#888;" 
    value="First Name" onfocus="inputFocus(this)" onblur="inputBlur(this)" /> 

JavaScript:

function inputFocus(i) { 
    if (i.value == i.defaultValue) { i.value = ""; i.style.color = "#000"; } 
} 
function inputBlur(i) { 
    if (i.value == "") { i.value = i.defaultValue; i.style.color = "#888"; } 
} 

Answer 2

Chrome, Firefox, Safari IE10 và hỗ trợ các thuộc tính html5 placeholder

<input type="text" placeholder="First Name:" />

Để có được một giải pháp trình duyệt chéo hơn bạn sẽ cần phải sử dụng một số javascript, có rất nhiều trước khi thực hiện các giải pháp trên mạng, mặc dù tôi không biết bất kỳ đầu nào.

http://www.w3schools.com/tags/att_input_placeholder.asp

Answer 3

Với HTML5, bạn có thể làm điều này hữu với:

này không được hỗ trợ với tất cả các trình duyệt mặc dù (IE)

này có thể làm việc:

<input type="first_name" value="First Name" onfocus="this.value==this.defaultValue?this.value='':null"> 

Ngược lại, nếu bạn đang sử dụng jQuery, bạn có thể sử dụng .focus và .css để thay đổi màu sắc.

Answer 4

Đây là phiên bản công phu, để giúp bạn hiểu

function setVolatileBehavior(elem, onColor, offColor, promptText){ 
elem.addEventListener("change", function(){ 
    if (document.activeElement == elem && elem.value==promptText){ 
     elem.value=''; 
     elem.style.color = onColor; 
    } 
    else if (elem.value==''){ 
     elem.value=promptText; 
     elem.style.color = offColor; 
    } 
}); 
elem.addEventListener("blur", function(){ 
    if (document.activeElement == elem && elem.value==promptText){ 
     elem.value=''; 
     elem.style.color = onColor; 
    } 
    else if (elem.value==''){ 
     elem.value=promptText; 
     elem.style.color = offColor; 
    } 
}); 
elem.addEventListener("focus", function(){ 
    if (document.activeElement == elem && elem.value==promptText){ 
     elem.value=''; 
     elem.style.color = onColor; 
    } 
    else if (elem.value==''){ 
     elem.value=promptText; 
     elem.style.color = offColor; 
    } 
}); 
elem.value=promptText; 
elem.style.color=offColor; 
} 

Sử dụng như thế này:

setVolatileBehaviour(document.getElementById('yourElementID'),'black','gray','Name'); 

Answer 5

Bạn có thể sử dụng giải pháp Floern của. Bạn cũng có thể muốn tắt đầu vào trong khi bạn đặt màu thành màu xám. http://www.w3schools.com/tags/att_input_disabled.asp

Answer 6

Cách ngắn nhất là trực tiếp thêm mã bên dưới làm thuộc tính bổ sung trong loại đầu vào mà bạn muốn thay đổi.

onfocus="if(this.value=='Search')this.value=''" 
onblur="if(this.value=='')this.value='Search'" 

Xin lưu ý: Thay đổi văn bản "Tìm kiếm" thành "đi" hoặc bất kỳ văn bản nào khác phù hợp với yêu cầu của bạn.

Answer 7

Nếu bạn đang nhắm mục tiêu HTML5 duy nhất mà bạn có thể sử dụng:

<input type="text" id="firstname" placeholder="First Name:" /> 

Đối với trình duyệt HTML5 không, tôi sẽ xây dựng dựa trên câu trả lời của Floern bằng cách sử dụng jQuery và làm cho javascript không gây khó chịu. Tôi cũng sẽ sử dụng một lớp để xác định các thuộc tính bị mờ.

$(document).ready(function() { 

    //Set the initial blur (unless its highlighted by default) 
    inputBlur($('#Comments')); 

    $('#Comments').blur(function() { 
     inputBlur(this); 
    }); 
    $('#Comments').focus(function() { 
     inputFocus(this); 
    }); 

}) 

Chức năng:

function inputFocus(i) { 
    if (i.value == i.defaultValue) { 
     i.value = ""; 
     $(i).removeClass("blurredDefaultText"); 
    } 
} 
function inputBlur(i) { 
    if (i.value == "" || i.value == i.defaultValue) { 
     i.value = i.defaultValue; 
     $(i).addClass("blurredDefaultText"); 
    } 
} 

CSS:

.blurredDefaultText { 
    color:#888 !important; 
} 

Answer 8

này hoạt động:

<input type="text" id="firstname" placeholder="First Name" /> 

Lưu ý: Bạn có thể thay đổi giá trị giữ chỗ, id và loại thành "email" hoặc bất kỳ điều gì phù hợp với nhu cầu của bạn.

Chi tiết bởi W3Schools tại địa chỉ: http://www.w3schools.com/tags/att_input_placeholder.asp

Nhưng đến nay là giải pháp tốt nhất là bằng cách Floern và Vivek Mhatre (sửa cuối bởi j0k)

Tôi có một đoạn đang dưới đây, đó là một trang web tiêu biểu trang.

.Submit { 
 
    background-color: #008CBA; 
 
    border: 3px; 
 
    color: white; 
 
    padding: 8px 26px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
} 
 
div { 
 
    background-color: yellow; 
 
    }

<div> 
 
    <center> 
 
    <p>Some functions may not work, such as the css ect. 
 
    <p>First Name:<input type="text" id="firstname" placeholder="John" /> 
 
    <p>Surname:<input type="text" id="surname" placeholder="Doe" /> 
 
    <p>Email:<input type="email" id="email" placeholder="john.doe@example.com" /> 
 
    <p>Password:<input type="email" id="email" placeholder="john.doe@example.com" /> 
 
    <br /><button class="submit">Submit</button>     </center> 
 
</div>