HTML - 輸入元素中不可放置的佔位符

我的表單中有一個URL字段。驗證器要求它有前面的http://，我認爲很多人都不會理解。HTML - 輸入元素中不可放置的佔位符

我可以有一個「佔位符」，用戶不能刪除或寫在它之前？

舉例：HTTP：// myinputhere.com

<input type="url" placeholder="http://">

來源

2013-12-18 Claudio

就像具有文本「http：//」的窗體一樣嗎？ – joseramonc

佔位符不能用於此目的。當用戶開始輸入時，佔位符文本將消失 –

@techfoobar驗證器只檢查'' – Claudio

佔位符不串聯的placeholder文本到用戶輸入的文本，它只是對任何信息要提供給您的用戶，像一些程序員不使用label而不是他們寫placeholder例如

<input type="text" placeholder="Enter Username Here" />

所以在這裏ÿ OU可以做到這一點就是，要麼你可以有一個預定義的http://值..

<input type="url" value="http://" />

或者你可以使用JavaScript或jQuery的用於客戶端驗證，而不是HTML5 type="url"這隻會賦予意義的語義，但你不能依賴僅限於HTML5驗證。

另外如果你想使用type與search或url值以保留語義比你可以禁止使用novalidate屬性HTML5驗證您form標籤。

您可以使用多個領域，一個與type設置爲url等來text，你可以連接兩個字段值..

input[type=url] { 
    width: 40px; 
} 

<input type="url" value="http://" readonly /> 
<input type="text" />

Demo

注意：使用客戶端驗證，如HTML 5和JavaScript可以是容易由您的用戶禁用，我會建議你有一個服務器方驗證，如果這對你很重要。但依靠客戶端方驗證只是不好。

來源

2013-12-18 08:02:00

如果不存在，請添加JS以將其放回原位。 – JNF

HTML 5標準嚴禁使用佔位符而不是標籤 - 您可以將答案中的重點從*改爲*而不是*改爲*附加信息*。 – pwdst

我對JS非常陌生，所以如果你能給我一個例子的代碼，我會很感激。「價值」工作正常，但可以刪除，這是不好的。 – Claudio

爲什麼你不使用JavaScript來做到這一點。我假設你有任何HTML標籤類似這樣的

<input id="test" type="url" onclick="testJS()" placeholder="http://">

，並嘗試這下面的JavaScript

function testJS(){ 
    var a = document.getElementById("test"); 
    a.value = "http://"; 
}

來源

2013-12-18 08:08:09

注意：這將失敗，如果JS被禁用 –

1.你**可以**刪除它。如果再次點擊，它會從'http：//'的方式刪除所有內容。 – Claudio

@ Mr.Alien最近禁用JavaScript的用戶應該得到一個糟糕的用戶界面。 –

您可以使用JavaScript和jQuery來做到這一點。（仍在尋找解決方案）

或者你可以把HTTP：//文本的文本框：

<input type='url' value='http://'>

或者你也可以在文本框中的前面添加一些文字，然後接受輸入是沒有http：//文本

<p style='display: inline-block'>http://</p><input type='url' style='display: inline-block'>

您還可以使用CSS定位顯示在輸入框的跨度元素，然後添加填充到輸入框讓用戶輸入不會在去跨度元素。

來源

2013-12-18 08:11:22 EasyDevop

可以顯示在這樣的輸入span元素：

HTML：

<div class="wrapper"> 
    <input type="url" /> 
    <span>http://</span>  
</div>

CSS：

.wrapper { 
    position: relative; 
} 
input { 
    padding-left: 48px; 
} 
.wrapper span { 
    position: absolute; 
    left: 2px; 
}

Example

來源

2013-12-18 08:49:24 EasyDevop

不希望看起來像我在選擇你，在用戶忽略URL中的協議（http：//或https：//）的情況下，這有助於使輸入值有效嗎？如果有任何事實，http：//提供的事實將使用戶更可能省略協議，因爲它看起來已經爲您提供了。它也排除了https：//網站。這次我沒有投票給你，但請考慮你的答案。 – pwdst

不，你不能有初始內容那不能被刪除。

該問題意味着錯誤的方法，因爲a）用戶可能會需要刪除http：//例如，如果他們需要輸入一個https：URL，b）佔位符不是這個，c）如果你使用value="http://"，它不是一個有意義的默認值，它使控制最初無效，d）如果你使用type="url"，你是要求提供一個將絕對URL作爲值並將其留給瀏覽器來實現的控件。

你可以做些什麼來幫助誰不知道如何鍵入一個絕對URL的用戶是使用title屬性，在這樣的背景下特殊的功能：它的值將出現在一個錯誤信息如果用戶在控制值無效時試圖提交表單，則由瀏覽器顯示。例如：

<input type="url" title="An absolute URL (usually starts with http://)">

來源

2013-12-18 09:42:39

HTML - 輸入元素中不可放置的佔位符

回答

相關問題