如何將文本框分成多個部分，以便每個部分接受一個字母？

我要設計一個登記表 which looks like the following image 如何將文本框分成多個部分，以便每個部分接受一個字母？

我要創建一個文本框，並將其分成與每個部分的多個部分接受僅一個字符作爲我們可以在圖像中看到。

我不知道如何分割文本框，以後我還需要填充數據庫中的某些字段。您能否告訴我一個解決方案，將文本框分成若干部分，在每個部分輸入一個字符。

2013-08-28 user2077648

你需要一個jQuery插件面具像http://igorescobar.github.io/jQuery-Mask-Plugin /和http://jquery-plugins.net/tag/input-format –

我看到這個例子，但我想爲每個字符單獨的文本框 – user2077648

你想要將一個基於紙張的表單轉換爲一個電子表格......但是，想讓它看起來完全一樣嗎？這些紙質表格是在100年前設計的，需要迅速燃燒...我的意思是，您需要15位數字作爲郵政編碼嗎？只要給你的輸入一個最大長度，用css製作出漂亮和現代的外觀，把所有需要的驗證放在那裏，它會看起來非常完美，並具有良好的用戶體驗...... – Thanos

<input type="text" maxlength="1" />

嘗試添加屬性最大長度

我創建了一個PHP示例，供您參考

http://pastebin.com/uj2jywKz

來源

2013-08-28 04:07:40 Parfait

你的建議寫幾百個輸入標籤？ – speeday125

是的，我同意@ speeday125，有沒有其他有效的方法呢？ – user2077648

user2077648，我創建了一個PHP示例，供您參考 http://pastebin.com/uj2jywKz – Parfait

如果這僅僅是一個形式和客戶希望有完全相同的形式，然後用<input type="text" maxlength="1" />構建它。您可以編寫一些JSP標籤，爲您生成所有這些<input type="text" maxlength="1" />。

<mytag:generate size="12">

在另一方面，你可以使用mask屬性並通過調整輸入文字，字體大小的尺寸，並使得面膜可見，你可以模仿上述形式改變你的面具mask('0|0|0|0|0|0|0')，然後。請注意，如果您更改背景顏色的面具顏色，那麼表格看起來也會更好。

來源

2013-08-31 07:33:48

在HTML中生成這樣的表單的真正價值是什麼？據我所知，這樣做的形式可以使計算機程序能夠快速識別不完整或不正確的填充物和/或允許對手動填充的填充物進行視覺檢查。

如果這裏真正需要的是產生這樣了輸入值的形式，我相信正確的設計是提供一個正規的形式輸入元素，稍後過程中提交建設預期的格式。

分離問題很重要。在這種情況下，強制用戶輸入字符製表符會成爲一種不好的體驗，迫使開發人員只需輸入javascript代碼即可確保一旦輸入字母，光標就可以進入下一個位置。無需提及哪些版本會是什麼樣子。

到目前爲止還沒有建立這樣的組件是有原因的。原因是糟糕的UI/UX。

希望它能幫助您做出決定。

來源

2013-10-25 18:00:58

我想，你需要爲每個字母創建單獨的輸入標記，因爲我們不能splitup單個輸入標籤

來源

2014-03-12 12:26:51

如何將文本框分成多個部分，以便每個部分接受一個字母？

回答

相關問題