Javascript在輸入文本中複製佔位符功能

創建文本框時，會顯示默認的灰色文本（＃888）。當它被給予焦點時，該值應該消失並開始顯示輸入的值。我寫的代碼對於這個問題，它是如下：Javascript在輸入文本中複製佔位符功能

<html> 
    <script type="text/javascript"> 
     function Focus(i) { 
      if (i.value == i.defaultValue) { 
       i.value = ""; 
       i.style.color = "#000"; 
      } 
     } 

     function Blur(i) { 
      if (i.value == "") { 
       i.value = i.defaultValue; 
       i.style.color = "#888"; 
      } 
     } 
    </script> 

    <body> 
     <input type="text" name="enter firstname" title="First Name" style="color:#888;" 
     value="First Name" onfocus="Focus(this)" onblur="Blur(this)" /> 
     <input type="text" name="enterlastname" title="Last Name" style="color:#888;" 
     value="lastname" onfocus="Focus(this)" onblur="Blur(this)" /> 
    </body> 

</html>

但是，在這裏，只要將文本框集中，價值正在消失。我應該怎麼做才能糾正這個問題？即使文本框處於焦點位置，該值也不應消失，只有在我開始鍵入該值時該值纔會消失。我是新用戶，因此我無法發佈屏幕截圖。

來源

2012-10-23 sravan

隨着http：// jsfiddle。 net /你可以更快地得到答案。 – hkutluay

首先，不在body/head元素中的腳本標記會創建無效的HTML，甚至可能會在某些瀏覽器中導致一些異常。 –

'i.defaultValue'是未定義的，但我會去尋找佔位符解決方案=>很容易 – VDP

你想要什麼叫做placeholder。

這樣使用它：

<input type="text" name="enterfirstname" placeholder="First Name" /> 
<input type="text" name="enterlastname" placeholder="Last Name" />

來源

2012-10-23 12:15:45 RASG

[詳細]（http://www.w3schools.com/html5/att_input_placeholder.asp）約佔位 – VDP

如果你想預先爲HTML5佔位符屬性的支持，我可以推薦jQuery的佔位符插件（https：//開頭github上。 COM/danielstocks/jQuery的佔位符）。 – Roy

佔位符是一個好主意，但它不支持IE，所以他仍需要在一些地方，以適應IE用戶。 – ORION

嘗試用

<html> 
<head> 
<script type="text/javascript"> 
    function Focus(i) { 
     if (i.value == i.defaultValue) { 
      i.value = ""; 
      i.style.color = "#000"; 
     } 
    } 

    function Blur(i) { 
     if (i.value == "") { 
      i.value = i.defaultValue; 
      i.style.color = "#888"; 
     } 
    } 
</script> 
</head> 
<body> 
    <input type="text" name="enter firstname" title="First Name" style="color:#888;" 
    value="First Name" onfocus="Focus(this)" onblur="Blur(this)" /> 
    <input type="text" name="enterlastname" title="Last Name" style="color:#888;" 
    value="lastname" onfocus="Focus(this)" onblur="Blur(this)" /> 
</body> 

</html>

注：腳本標籤不體內/頭元素創建無效的HTML

來源

2012-10-23 12:17:20

我沒有得到我所期望的。請參考此鏈接，它顯示我的佇足 https://www.mozilla.org/en-US/contribute/ 下，想要幫助，文本框有我的問題 – sravan

嘗試使用「的onkeydown」如下。 ...

function Focus(cntrl,value) 
{ 
    if (cntrl.value == value) 
    { 
     cntrl.value   = ''; 
     cntrl.style.color  = '#000'; 
    } 
} 
function Blur(cntrl,value) 
{ 
    if (cntrl.value == '') 
    { 
     cntrl.style.color  = 'gray'; 
     cntrl.value   = value;       
    } 
} 

<body> 
    <input type="text" name="enter firstname" title="First Name" style="color:#888;"  value="First Name" onkeydown="Focus(this,'First Name')" onblur="Blur(this,'First Name')" /> 
    <input type="text" name="enterlastname" title="Last Name" style="color:#888;"  value="lastname" onkeydown="Focus(this,'lastname')" onblur="Blur(this,'lastname')" /> 
</body>

來源

2012-10-23 12:23:42

謝謝，我得到了答案，但當遊標被放置，遊標位於最後位置，即最後一個字母。我該怎麼做，把光標放在第一個位置 – sravan

Javascript在輸入文本中複製佔位符功能

回答

相關問題