Jak utworzyć etykietę wewnątrz elementu?
Chciałbym wstawić opisowy tekst wewnątrz elementu wejściowego, który nie działa, gdy użytkownik na niego kliknie.
Wiem, że to bardzo popularna sztuczka, ale nie wiem, jak to zrobić..
Jakie jest najprostsze / lepsze rozwiązanie?
12 answers
<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" type="text" value="search">
Lepszym przykładem może być przycisk wyszukiwania so! Stąd mam ten kod. Przeglądanie źródła strony jest cennym narzędziem.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-04-23 12:25:18
Jeśli używasz HTML5, możesz użyć atrybutu placeholder.
<input type="text" name="user" placeholder="Username">
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-19 18:39:57
Moim zdaniem najlepsze rozwiązanie nie obejmuje ani obrazów, ani użycia domyślnej wartości wejścia. Raczej wygląda to jak rozwiązanie Davida Dorwarda.
Jest łatwy do zaimplementowania i ładnie rozkłada się dla czytników ekranu i użytkowników bez javascript.
Spójrz na dwa przykłady tutaj: http://attardi.org/labels/
Zwykle używam drugiej metody (labels2) na moich formularzach.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-01-05 09:19:00
Powszechnym podejściem jest użycie wartości domyślnej jako etykiety, a następnie usunięcie jej, gdy pole uzyska fokus.
Naprawdę nie podoba mi się to podejście, ponieważ ma wpływ na dostępność i użyteczność.
Zamiast tego chciałbym zacząć od użycia standardowego elementu obok pola.
Następnie, jeśli JavaScript jest aktywny, Ustaw klasę na elemencie nadrzędnym, co powoduje, że niektóre nowe style stosują się, że:
- względnie pozycjonuje div, który zawiera dane wejściowe i Etykieta
- Absolutely position the label
- absolutnie umieść wejście na górze etykiety
- Usuń obramowania wejścia i ustaw jego kolor tła na przezroczysty
Następnie, a także za każdym razem, gdy wejście traci ostrość, testuję, aby sprawdzić, czy wejście ma wartość. Jeśli tak, upewnij się, że element nadrzędny ma klasę (np. "hide-label"), w przeciwnym razie upewnij się, że nie ma tej klasy.
Ilekroć wejście zyskuje ostrość, Ustaw, że klasy.
Arkusz stylów użyje nazwy klasy w selektorze, aby ukryć Etykietę(Zwykle używając text-indent: - 9999px;).
To podejście zapewnia przyzwoite wrażenia dla wszystkich użytkowników, w tym tych z wyłączonym JS i tych korzystających z czytników ekranu.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-04-23 12:37:38
Zestawiłem rozwiązania zaproponowane przez @Cory Walker z rozszerzeniami od @ Rafael a jedna forma @ tex witch była dla mnie trochę skomplikowana i wymyślił rozwiązanie, które jest miejmy nadzieję
Zabezpieczenie przed błędami przy wyłączonym javascript i CSS.
Manipuluje kolorem tła pola formularza, aby pokazać / ukryć Etykietę.
<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>
Zobacz skrypt w akcji: http://mattr.co.uk/work/form_label.html
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-29 17:48:47
<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" onblur="if (this.value=='') this.value = 'search'" type="text" value="search">
Dodaj również wydarzenie onblur.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-04-04 18:38:00
Kiedy zaczniesz pisać, zniknie.Jeśli jest pusty, pojawi się ponownie.
<%= f.text_field :user_email,:value=>"",:placeholder => "Eg:[email protected]"%>
Najprostszy sposób...
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-11-28 05:54:59
Proszę użyć PlaceHolder.JS działa we wszystkich przeglądarkach i jest bardzo łatwy w obsłudze dla przeglądarek zgodnych z html5 http://jamesallardice.github.io/Placeholders.js/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-12-12 06:40:10
Jedna wskazówka dotycząca właściwości HTML placeholder i znacznika textarea, upewnij się, że nie ma spacji między <textarea> A </textarea>, w przeciwnym razie placeholder nie działa, na przykład:
<textarea id="inputJSON" spellcheck="false" placeholder="JSON response string" style="flex: 1;"> </textarea>
To nie zadziała, ponieważ jest spacja pomiędzy...
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-27 11:41:52
Użyj tego
Style:
<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");
Pamiętaj tylko o wywołaniu funkcji defaultLabelClean () przed wysłaniem formularza.
Dobra robota
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-03-18 21:33:36
Nie potrzebujesz do tego kodu Javascript...
Chyba masz na myśli atrybut zastępczy. Oto kod:
<input type="text" placeholder="Your descriptive text goes here...">
Domyślny tekst będzie szary i po kliknięciu zniknie!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-10 02:07:29
Oto prosty przykład, wszystko, co robi, to nakładanie obrazu(z dowolnym sformułowaniem, które chcesz). Gdzieś widziałem tę technikę. Używam biblioteki prototypów, więc musisz zmodyfikować, jeśli używasz czegoś innego. Z ładowaniem obrazu po oknie.ładowanie nie powiedzie się, jeśli javascript jest wyłączony.
<!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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-04-23 14:10:48