Alanlarda bir form ve odak imleç kutularının içine açıklayıcı metin koymak nasıl?

6 Cevap php

Sorunun temelde iki parçalar.

  1. Stilleri ile (bir formda bir metin kutusu metin alanına e-mail yazma gibi) bir formda metin kutularının içine açıklayıcı metin koymak için nasıl facebook ana gibi (yani önermek anlamına böylece gri renkte).
  2. Kısa sürede sayfa yükler gibi belirli bir form alanı üzerinde imleç odak koymak nasıl (gibi google-oturum veya facebook sign-in)

Yukarıdaki işlemlerin herhangi dahil JavaScript var mı? Evetse, lütfen belirtiniz

  1. olmayan bir javascript çözüm ve / veya
  2. javascript kodu gerekli olanı yapıyor

6 Cevap

İlk hile, sadece önceden ayarlanmış bir değerdir. Ve bunu denetleyen bir onclick işlevi vardır alanını tıkladığınızda. Değer "Burada e-mail yazın" dir. Eğer öyleyse, alanını temizleyin. Değilse hiçbir şey yok.

Daha sonra, kontrol alanı boş bir onblur işlevi vardır. Eğer öyleyse, baskı içinde "burada e-posta yazın."

2. bir de JavaScript.

Bu işlevlerin her ikisi ile Here is bir örnek sayfa

<html>
<script type="text/javascript">
	function searchBox()
	{
		elem = document.getElementById("search");

		if(elem.value == "Search...")
		{
			elem.value = "";
		}
	}

	function searchBoxBlur()
	{
		elem = document.getElementById("search");

		if(elem.value == "")
		{
			elem.value = "Search...";
		}
	}

	function init()
	{
		document.getElementById("other_box").focus();
    	}
    	window.onload = init;
    </script>
<body>
    <input type="text" name="other_box" id="other_box" />
    <input type="text" name="search" id="search" value="Search..." onclick="searchBox()" onblur="searchBoxBlur()" />
</body>
</html>

, Ilk hızlı ve kirli:

<input name="foo" value="Default text OMG!" onfocus="if(this.value == 'Default text OMG!') this.value = ''"/>

Harici JavaScript dosyasında bu onfocus olay bir işlev yapma tavsiye ederiz. Bu doğuracak:

Harici komut:

function checkText(el,someText){ if(el.value == someText) el.value = ''}

Sizin giriş:

<input name="foo" value="Default text OMG!" onfocus="checkText(this,'Default text OMG!')"/>

İkinci: Eğer bir kimlik "odaklı" ve böyle bir şey yapmak istiyorum bilgi verin:

<input id="foo" name="foo" value="Default text OMG!"/>

Ve bir komut:

window.onload = function(){ document.getElementById('foo').focus() }

Bu (jQuery çerçevesinde yoluyla) javascript gerektirir. Aşağıdaki hızlı-daktilo ve denenmemiş edildi. Bazı küçük müdahalesi gerekebilir. Sorularınız varsa - ask :)

  1. Otomatik odaklama İstenilen Eleman
  2. Eleman Metin rengini değiştirmek flu
  3. Kullanıcı tarafından sağlanan metin mevcut olmadığı zaman, varsayılan metni göster

/* Run our work once the document is ready (loaded */
$(document).ready(function(){

  /* Set initial state of field */
  $("input.first-name").val("First Name").css("color", "#CCCCCC");

  /* Attach logic to the .focus() event of our input field */
  $("input.first-name").focus(function(){

    /* What to do when this field is focused */
    $(this).val("").css("color", "#333333");

  }).blur(function(){

    /* What to do when the field is blurred */
    if ($(this).val() == "") {

      /* Set value to 'First Name,' and set color to light gray */
      $(this).val("First Name").css("color", "#CCCCCC");

    }

  });

  /* Autofocus our field */
  $("input.first-name").focus();

});

Sorunuzun ilk kısmını yapmak için hiçbir JavaScript olmayan bir yolu yoktur. Bildiğim kadarıyla ikinci kısmı ile ilgili olarak, kolayca JavaScript ile yapılabilir, ama bile olmadan, en modern tarayıcılar ilk giriş alanına odak eklemek.

JavaScript kodu

  1. Sadece önceden ayarlanmış değeri giriş alanına değerini ayarlayın:

    function focus_function()
{
if (this.value=="Enter email here") {
this.value="";
this.class="actualEmail";
}
}

function blur_function()
{
if (this.value=="") {
this.value="Enter email here";
this.class="preset";
}
}

    İki CSS sınıfları olabilir: preset ve actualEmail, ve farklı renkler, vb belirtin

  2. Sadece gerekli giriş alanına odak koyar bir onload fonksiyonu vardır:

    window.onload = function() 
{
document.getElementById("email_field").focus();
}

placeholder (safari işleri sanırım) ve autofocus (HTML5 spec bir parçası) : Standart olmayan Eğer düşünebilirsiniz nitelikleri vardır.

myField.focus();

Sayfa yüklendiğinde (Eğer sonunda veya bir $(document).ready() jQuery bloğu içinde yer varsa) o myfield içinde imleci gerekir. Ben farklı tarayıcılarda bu bazı tutarsız davranışı gördük, bu yüzden sizin kilometre değişebilir.

Bildiğim kadarıyla bir metin alanının giriş rengini ayarlama gibi, ben bir varsayılan değere sahip ayarlayın ve kullanıcı içine tıkladığında ayrı bir CSS sınıfı eklemek istiyorum:

Ve CSS gibi görünecektir:

.grayedInputField {
    color: gray;
}
.activeInputField {
    color: black;
}

Ve kullanıcı alana tıkladığında, javascript yüzden (yine, jQuery) gibi, metin rengini değiştirmek için alana bir sınıf eklemek adres:

 $(".grayedInputField").focus(function(){$(this).addClass("activeInputField")});

etiketler