Hướng dẫn html input greyed out text - đầu vào html văn bản bị mờ đi

Làm cách nào để tạo một hộp văn bản có nội dung màu xám và khi tôi nhấp vào 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?

Example:

Một hộp văn bản "Tên đầu tiên". Các từ "Tên đầu tiên" nằm trong hộp văn bản màu 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 đó.

hỏi ngày 13 tháng 1 năm 2011 lúc 14:19Jan 13, 2011 at 14:19

1

Chrome, Firefox, IE10 và Safari hỗ trợ thuộc tính giữ chỗ HTML5

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

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

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

David

99812 Huy hiệu bạc21 Huy hiệu đồng12 silver badges21 bronze badges

Đã trả lời ngày 13 tháng 1 năm 2011 lúc 14:22Jan 13, 2011 at 14:22

Câu trả lời này minh họa một cách tiếp cận trước HTML5. Vui lòng xem câu trả lời của Psytronic cho một giải pháp hiện đại bằng cách sử dụng thuộc tính

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

HTML:

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

Đã trả lời ngày 13 tháng 1 năm 2011 lúc 14:24Jan 13, 2011 at 14:24

FloernfloernFloern

33K24 Huy hiệu vàng103 Huy hiệu bạc118 Huy hiệu đồng24 gold badges103 silver badges118 bronze badges

2

Với HTML5, bạn có thể thực hiện điều này với:

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

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

Điều này có thể hoạt động:

Nếu không, nếu bạn đang sử dụng jQuery, bạn có thể sử dụng .f Focus và .css để thay đổi màu.

Đã trả lời ngày 13 tháng 1 năm 2011 lúc 14:25Jan 13, 2011 at 14:25

David Houdedavid HoudeDavid Houde

4.7851 Huy hiệu vàng19 Huy hiệu bạc29 Huy hiệu đồng1 gold badge19 silver badges29 bronze badges

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

Đối với các trình duyệt không phải HTML5, tôi sẽ xây dựng 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 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);
    });

})

Functions:

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

Đã trả lời ngày 8 tháng 8 năm 2014 lúc 10:32Aug 8, 2014 at 10:32

JayjayJay

8383 Huy hiệu vàng12 Huy hiệu bạc20 Huy hiệu đồng3 gold badges12 silver badges20 bronze badges

Cách ngắn nhất là trực tiếp thêm mã dưới đây dưới dạng các 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 "GO" 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.

j0k

22.4K28 Huy hiệu vàng78 Huy hiệu bạc87 Huy hiệu đồng28 gold badges78 silver badges87 bronze badges

Đã trả lời ngày 9 tháng 11 năm 2011 lúc 14:19Nov 9, 2011 at 14:19

Những công việc này:

Lưu ý: Bạn có thể thay đổi trình giữ chỗ, ID và gõ giá trị thành "email" hoặc bất cứ điều gì phù hợp với nhu cầu của bạn. You can change the placeholder, id and type value to "email" or whatever suits your need.

Thông tin chi tiết của W3Schools tại: http: //www.w3schools.com/tags/att_input_placeholder.asp

Nhưng cho đến nay, các giải pháp tốt nhất là của Floern và Vivek Mhatre (được chỉnh sửa bởi J0K)

Tôi có một đoạn mã bên dưới, đó là một trang web điển hình.code snippet below, that is a typical web page.

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

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

Đã trả lời ngày 5 tháng 1 năm 2017 lúc 17:01Jan 5, 2017 at 17:01

PiggyplexpiggyplexPiggyPlex

5911 Huy hiệu vàng3 Huy hiệu bạc15 Huy hiệu đồng1 gold badge3 silver badges15 bronze badges

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

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

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

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

Đã trả lời ngày 13 tháng 1 năm 2011 lúc 14:29Jan 13, 2011 at 14:29

UltrainStincultrainStinctUltraInstinct

42.4K12 Huy hiệu vàng78 Huy hiệu bạc102 Huy hiệu đồng12 gold badges78 silver badges102 bronze badges

Dưới đây là một cách mỏng một lớp để phân lớp văn bản trên đầu vào trong jQuery bằng cú pháp ES6.

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

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

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

Đã trả lời ngày 29 tháng 6 năm 2020 lúc 8:50Jun 29, 2020 at 8:50

PiggyplexpiggyplexPiggyPlex

5911 Huy hiệu vàng3 Huy hiệu bạc15 Huy hiệu đồng1 gold badge3 silver badges15 bronze badges