Tôi muốn chèn văn bản mô tả bên trong yếu tố đầu vào sẽ biến mất khi người dùng nhấp vào nó.Cách tạo nhãn bên trong phần tử <input>?
Tôi biết đó là thủ thuật rất phổ biến, nhưng tôi không biết làm thế nào để làm điều đó ..
Giải pháp đơn giản/tốt nhất là gì?
<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" type="text" value="search">
Ví dụ tốt hơn là nút tìm kiếm SO! Đó là nơi tôi nhận được mã này từ. Xem nguồn trang là một công cụ có giá trị.
Cách tiếp cận chung là sử dụng giá trị mặc định làm nhãn, sau đó xóa nó khi trường lấy tiêu điểm.
Tôi thực sự không thích phương pháp này vì nó có khả năng tiếp cận và khả năng sử dụng.
Thay vào đó, tôi sẽ bắt đầu bằng cách sử dụng phần tử chuẩn bên cạnh trường.
Sau đó, nếu JavaScript được kích hoạt, thiết lập một lớp trên một phần tử tổ tiên gây ra một số phong cách mới để áp dụng rằng:
Sau đó, và bất cứ khi nào đầu vào mất tiêu điểm, tôi kiểm tra xem đầu vào có giá trị hay không. Nếu có, hãy đảm bảo rằng phần tử tổ tiên có một lớp (ví dụ: "ẩn nhãn"), nếu không, đảm bảo rằng nó không có lớp đó.
Bất cứ khi nào đầu vào tăng tiêu điểm, hãy đặt lớp đó.
Biểu định kiểu sẽ sử dụng tên lớp đó trong bộ chọn để ẩn nhãn (sử dụng thụt lề văn bản: -9999px; thường).
Cách tiếp cận này mang đến trải nghiệm phong phú cho tất cả người dùng, bao gồm cả những người dùng bị tắt JS và những người sử dụng trình đọc màn hình.
Đây là một ví dụ đơn giản, tất cả những gì nó làm là phủ một hình ảnh (với bất kỳ từ ngữ nào bạn muốn). Tôi thấy kỹ thuật này ở đâu đó. Tôi đang sử dụng thư viện nguyên mẫu, do đó bạn sẽ cần phải sửa đổi nếu sử dụng cái gì khác. Với tải hình ảnh sau khi window.load nó không thành công nếu javascript bị vô hiệu hóa.
<!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>
Theo tôi, giải pháp tốt nhất liên quan đến cả hình ảnh lẫn giá trị mặc định của đầu vào. Thay vào đó, nó trông giống như giải pháp của David Dorward.
Thật dễ dàng để triển khai và giảm thiểu độc đáo cho trình đọc màn hình và người dùng không có javascript.
Hãy xem hai ví dụ ở đây: http://attardi.org/labels/
Tôi thường sử dụng phương pháp thứ hai (labels2) trên hình thức của tôi.
giải pháp với các nhãn đằng sau một đầu vào trong suốt thực sự là việc thực hiện sạch sẽ nhất mà tôi từng thấy. – nailitdown
Điều này thật tuyệt. Cảm ơn! –
Giải pháp rất đẹp - kiểm soát nhiều hơn diện mạo và cảm nhận, không phải lo lắng về việc xác nhận/hình thức bài can thiệp. – eddiegroves
sử dụng này
phong cách:
<style type="text/css">
.defaultLabel_on { color:#0F0; }
.defaultLabel_off { color:#CCC; }
</style>
html:
javascript:
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");
Chỉ cần nhớ để gọi defaultLabelClean() chức năng được gửi biểu mẫu.
công việc tốt
Nếu bạn đang sử dụng HTML5, bạn có thể sử dụng thuộc tính placeholder.
<input type="text" name="user" placeholder="Username">
+1. Câu trả lời này nên nêu rõ đây chỉ là HTML5. – ripper234
Ngoài ra, theo [trang web này] (http://caniuse.com/input-placeholder), IE không hỗ trợ điều này ngay cả cho đến IE9. – notan3xit
Tôi chỉ cần thả một cái gì đó như https://github.com/serby/jquery.placeholder.js/blob/master/jquery.placeholder.js cho các trình duyệt đó. –
<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" onblur="if (this.value=='') this.value = 'search'" type="text" value="search">
Thêm một sự kiện onblur quá.
tôi đã đặt cùng các giải pháp bởi @Cory Walker đề xuất với các phần mở rộng từ @Rafael và một trong những hình thức @Tex phù thủy là một chút phức tạp đối với tôi và đã đưa ra một giải pháp đó là hy vọng
chống lỗi với javascript và CSS bị vô hiệu hóa.
Thao tác với màu nền của trường biểu mẫu để hiển thị/ẩn nhãn.
<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>
Xem kịch bản trong hành động: http://mattr.co.uk/work/form_label.html
Khi bạn bắt đầu gõ nó sẽ disappear.If trống rỗng, nó sẽ xuất hiện trở lại.
<%= f.text_field :user_email,:value=>"",:placeholder => "Eg:[email protected]"%>
Cách đơn giản nhất ...
Vui lòng sử dụng PlaceHolder.JS tác phẩm của mình trong tất cả các trình duyệt và rất dễ dàng cho những người không html5 trình duyệt tương thích
Bạn không cần một mã Javascript cho điều đó. ..
Tôi nghĩ bạn có nghĩa là thuộc tính giữ chỗ. Đây là mã:
<input type="text" placeholder="Your descriptive text goes here...">
Văn bản mặc định sẽ có màu xám-ish và khi nhấn vào, nó sẽ biến mất!
Một gợi ý về sở hữu placeholder và thẻ textarea HTML, hãy chắc chắn rằng không có bất kỳ khoảng trống giữa <textarea> và </textarea>, nếu không placeholder không hoạt động, ví dụ:
<textarea id="inputJSON" spellcheck="false" placeholder="JSON response string" style="flex: 1;"> </textarea>
Điều này sẽ không hoạt động, vì có khoảng cách giữa ...
Để ghi lại, giải pháp http://attardi.org/labels/ được đề xuất bởi Tex thực sự tốt hơn so với một từ Cory Walker. – nailitdown
UX khủng khiếp, đã chứng minh thời gian và thời gian một lần nữa. – Rudie
Hình ảnh không hoạt động. Đã xóa nó khỏi bài đăng. Vẫn có sẵn trong [sửa đổi 3] (http://stackoverflow.com/revisions/781473/3). – Shimmy