具有商品浮動標籤和設置輸入值的隱形輸入標籤

在this sample我希望電子郵件標籤在電子郵件輸入上方可見。看起來如果我開始編輯輸入數據。具有商品浮動標籤和設置輸入值的隱形輸入標籤

我在這裏做錯了什麼？

<label class="item item-input item-floating-label"> 
    <span class="input-label">Email</span> 
    <input type="email" value="[email protected]"> 
</label>

來源

2015-03-03 0tto

你有沒有想出解決辦法？我遇到了同樣的問題。 – jmcopeland 2015-05-26 21:59:05

不，我認爲有人必須就此向離子提交問題。 – 0tto 2015-05-27 09:01:59

item-floating-label類在用戶輸入字段中鍵入動畫標籤。請參閱文檔瞭解更多詳情。

http://ionicframework.com/docs/components/#forms-floating-labels

爲了您的要求，始終顯示上面輸入字段的標籤，你必須使用item-stacked-label

http://ionicframework.com/docs/components/#forms-stacked-labels

來源

2015-03-03 15:59:24

感謝您的回覆，但我不同意。「項目堆疊標籤」是一種具有不同行爲的獨立類型。我希望控件能夠作爲「項目浮動標籤」工作，但也支持已設置值的情況。請與「Light主題」下面的[this]（http://www.google.com/design/spec/fone-text-text-fields.html#text-fields-floating-labels）進行比較，這裏有一個名爲「Normal with輸入文字+標籤「。這就是我期望的樣子。 – 0tto 2015-03-09 11:46:01

隨着NG-模型的價值代替它已經預期行爲。所以，你的代碼更改

<label class="item item-input item-floating-label"> 
    <span class="input-label">Email</span> 
    <input type="email" ng-model="account.email"> 
</label>

，並添加像在你的控制器

來源

2015-06-04 10:27:35 JanP

設置佔位符相同的文字作爲標籤下面。在這種情況下，placeholder="Email"。浮動項目標籤以這種方式工作..直到填充字段，標籤將不可見，而是佔位符將可見。就像你在字段中輸入的那樣，標籤就會出現。動畫很時尚而且很漂亮。（區分大小寫）

來源

2015-08-10 05:21:52

我有使用AppGyver Supersonic的類似問題。我解決了控制我的input-label的has-input類使用ng-class，像這樣：

<label class="item item-input item-floating-label"> 
    <span class="input-label" ng-class="{'has-input': username}">Choose a username</span> 
    <input type="text" placeholder="Choose a username" ng-model="username"> 
</label>

來源

2016-01-25 16:05:22

具有商品浮動標籤和設置輸入值的隱形輸入標籤

回答

相關問題