UI問題：設計一個組合框是一個元素高

這是一個UI問題，處理HTML和JavaScript，來看看如何得到我想要的功能，而無需混淆用戶UI問題：設計一個組合框是一個元素高

下面我有一個表它有一個選擇框作爲我表中的第一個單元格。

此應用沒有提交按鈕。您更改選擇框，更新數據庫，更改數據庫更新的輸入框中的內容。

一切都基於JavaScript中的onchange事件。

我的問題是，用戶需要能夠將項目添加到選擇框，因爲它不是一個獨佔列表。但是，我想保持UI一致，所以我想讓用戶只需鍵入選擇框，因此需要組合框。

但是，我不希望兩個元素堆疊的組合框，因爲這會使每個單元格比它需要更高。

所以，另一種選擇是使用onkeydown事件，如果他們使用ASCII 32-97左右的字符（只有英文單詞），那麼它將進入一個輸入框，所以，當他們點擊時，選擇框中有一個新項目。

但是，爲了做到這一點，我需要隱藏/取消隱藏共享相同位置的兩個元素，一個輸入框和一個選擇框，這兩個元素都位於表格的第一列。元素的移動會令人困惑。

- >問題1：那麼，我怎樣才能減少用戶的注意力呢？ < -

- >問題2：是否有另一種方法可以有一個可編輯的選擇框，可能不會在HTML中分散注意力？ < -

這是一個UI問題，下表是因爲它似乎是很重要的一些人

表是這裏純粹是用於說明目的。

<table border="1" bgcolor="#ffcc99" width="90%"> 
<thead> 
</thead> 
<tbody> 
<tr> 
</tr> 
<tr> 
</tr> 
<tr> 
<td> 
<select name="SourceFunds*SourceID*SourceID^SourceNumber*1113^1"> 
<option value="1119">Capital Maintenance</option> 
<option value="1063">Waterworks Fund</option> 
<option value="1114">Waterworks Fund/Other Sources</option> 
</select> 
</td> 
<td> 
<input type="text" value="79" name="SourceFunds*SourceOfFundsYr1*SourceID^SourceNumber*1113^1"/> 
</td> 
<td> 
<input type="text" value="0" name="SourceFunds*SourceOfFundsYr2*SourceID^SourceNumber*1113^1"/> 
</td> 
<td> 
<input type="text" value="0" name="SourceFunds*SourceOfFundsYr3SourceID^SourceNumber*1113^1"/> 
</td> 
</tr> 
</tbody> 
</table>

來源

2009-09-14 James Black

回覆：「鍵入功能」功能，你的意思是像這些組合框？ http://demos.telerik.com/aspnet-ajax/combobox/examples/default/defaultcs.aspx？ – 2009-09-14 21:01:35

我喜歡這裏完成的方法，它看起來非常簡單直觀。 – 2009-09-14 23:58:01

最好的答案似乎是暗示評論此鏈接： demos.telerik.com/aspnet-ajax/combobox/

我已經開始了一個JavaScript文件，所以我可以概括這個概念，所以它可以很好適應與我在做什麼。

我還沒有爲我的選擇器，ajax調用或事件處理使用框架，當我可以自己編寫它時，沒有必要爲一個組件提供一個框架。

這個設計看起來非常有用，我將使用畫布標籤作爲下龍的圖像。

來源

2009-09-15 23:23:06

一對夫婦的想法：

萊事出這麼盒子寬，個子不高。所以你有[選擇] [文本輸入] [+]（其中+是一個按鈕來提交文本輸入的內容）
在選擇下拉列表中添加一個神奇選擇「添加新的」選擇該選項通過文本輸入和「添加」按鈕呈現某種形式的窗口，單擊添加將元素添加到選擇列表的選項列表中，選擇該選項，然後觸發任何常規處理。
環顧四周對於你想要的組合框庫，它可能會模仿一個元素，而不是實際使用一個元素。

來源

2009-09-14 20:51:01 timdev

我想到了添加新選項，但我喜歡彈出的想法，我沒有考慮。更寬將是一個問題，因爲我希望這適合較小的顯示器，如果可能，無需滾動，但它只有7列，選擇框可以相當寬（30 +字符） – 2009-09-14 20:55:29

我包括「更寬」選項只是爲了完整性。這是一個非常懶惰的方法。 Bobince的答案包含了我在第三點中談到的那種javascript組合框庫的鏈接。我認爲模式「添加新」的形式可能是要走的路。它應該是高性能的，對用戶來說很明顯，並且相當容易實現。 – timdev 2009-09-14 21:28:07

是的，這聽起來讓我感到非常困惑。大多數用戶可能不會嘗試輸入新條目，因爲它沒有可視化的功能，而那些用戶可能會嘗試使用鍵盤來選擇現有條目！

如何選擇框右側的小按鈕將其變成可寫，直到您按下Enter或將其對焦？這對我來說會更清楚。

或者您可以用JavaScript控制的模擬替換整個選擇控件。有相當多的庫爲你做這件事（例如，1,2,3）;我從來沒有找到一個能讓事情變得正確的事情（特別是在鍵盤控制方面），但其中一個可能已經足夠好了。

來源

2009-09-14 21:04:24 bobince

答案中的鏈接'2'和'3'似乎已死亡。 – Pang 2016-06-20 10:30:08

UI問題：設計一個組合框是一個元素高

回答

相關問題