當焦點事件觸發輸入時，使HTML5數據列表可見

由於有些人可能已知樣式選擇元素是一場噩夢，如果沒有一些JavaScript欺騙，字面上是不可能的。 HTML5中的新數據列表可以達到相同的目的，因爲用戶可以看到一系列選項，並將值記錄在輸入文本字段中。當焦點事件觸發輸入時，使HTML5數據列表可見

這裏的限制是，列表不會出現，直到用戶開始在文本字段中輸入內容爲止，即使只是根據其輸入顯示可能的匹配。我想要的行爲是，只要對該字段有專注，整個選項列表就會變得可見。

所以我有這樣的代碼 - view on jsbin

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>Input - Datalist</title> 
</head> 
<body> 
    <input list="categories"> 
    <datalist id="categories"> 
    <option value="Breakfast">Breakfast</option> 
    <option value="Brunch">Brunch</option> 
    <option value="Lunch">Lunch</option> 
    <option value="Dinner">Dinner</option> 
    <option value="Desserts">Desserts</option> 
    </datalist> 
</body> 
</html>

，我試圖讓與此Javascript顯示：

var catVal = document.getElementsByTagName("input")[0], 
    cat = document.getElementById("categories"); 

    catVal.style.fontSize = "1.3em"; 

    catVal.addEventListener("focus", function(event){ 
    cat.style.display = "block"; 
    }, false);

任何幫助，將不勝感激，

乾杯

來源

2013-03-25 forthehackofit

我試圖達到同樣的，你有任何運氣這麼遠？ – brillout 2013-04-21 16:51:40

-1

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 

    <meta charset=utf-8 /> 
    <title>Input - Datalist</title> 
</head> 
<body> 

    <input list="categories" id="categories2" type="text"> 
    <div id="result"></div> 
    <datalist id="categories"> 
    <option value="Breakfast">Breakfast</option> 
    <option value="Brunch">Brunch</option> 
    <option value="Lunch">Lunch</option> 
    <option value="Dinner">Dinner</option> 
    <option value="Desserts">Desserts</option> 
    </datalist> 
</body> 
</html>

的jQuery：

var result=''; 
$(document).ready(function(){ 
    $('input[type=text]').focus(function(){ 
     $('#categories option').each(function(){ 
     result=result+" "+$(this).val(); 
     }); 

     $('#result').show().html(result); 
     $('input[type=text]').unbind('focus'); 
    }); 
    $('input[type=text]').blur(function(){ 
     $('#result').hide(); 
     $('input[type=text]').focus(function(){ 
      $('#result').show(); 
     }); 

    }); 
});

工作JS斌

http://jsbin.com/urupit/4/watch

來源

2013-03-26 20:36:47 writeToBhuwan

好的想法，但這不是我所追求的行爲，對於我們的用戶體驗，我們不想創建持有者分區，因爲我們將至少有3個這樣的輸入並排。我希望datalist在輸入獲取焦點事件時顯示。 – forthehackofit 2013-03-27 17:43:58

爲什麼不雙擊輸入類型文本？它會顯示整個列表。 – writeToBhuwan 2013-03-27 19:37:04

作爲開發者，我知道這就是我需要做的就是到這一點，但不是很明顯，爲什麼我試圖觸發第二誰最有可能被用來在輸入框中單擊一次並開始鍵入用戶，原因請儘快點擊 – forthehackofit 2013-03-28 14:37:10

我使用下面的代碼：

<input name="anrede" 
    list="anrede" value="Herr" 
    onmouseover="focus();old = value;" 
    onmousedown = "value = '';" 
    onmouseup="value = old;"/> 

<datalist id="anrede"> 
    <option value="Herr" selected></option> 
    <option value="Frau"></option> 
    <option value="Fraulein"></option> 
</datalist>

鼠標懸停：
點設定對焦和在記住舊值 - 全球 - 變量

鼠標按下：
刪除值並顯示datalist（內置功能）

鼠標鬆開：
恢復舊值

然後選擇新值。

找到這是一個可接受的解決方法，朝着組合框。

來源

2013-12-17 23:15:39

這是怎麼做到OP要求的？ – Tom 2014-07-27 08:32:40

是否需要任何jquery代碼。我認爲datalist和列表關聯的輸入應該足以滿足需要（在Chrome中），或者在這裏我缺少瀏覽器兼容性問題嗎？ – saurshaz 2015-04-26 04:42:26

我希望你喜歡這個解決方案：

我加了一個「臨時」屬性的輸入字段存儲，一旦鼠標懸停在輸入提起它會保存其當前值的溫度，然後刪除該值以便允許數據專家打開。

在鼠標移出時，它將從變量temp恢復字段值。該解決方案在我測試的Chromium下運行良好。

<input value="Classic" list="myDatalist" temp="" onmouseover="this.temp=this.value; this.value='';" onmouseout="this.value=this.temp;"> 
    <datalist id="myDatalist" open="open"> 
    <option value="Internet Explorer"> 
    <option value="Firefox"> 
    <option value="Chrome"> 
    <option value="Opera"> 
    <option value="Safari"> 
    </datalist>

作爲獎勵，您可以添加...佔位符=「點擊查看所有選項」

來源

2017-10-25 12:48:22 user4723924

當焦點事件觸發輸入時，使HTML5數據列表可見

回答

相關問題