如果想讓TextBox(input element)可以用選的,如下圖:
該怎麼做呢?
作法:
HTML 5有支援Number input type,按此可知那些瀏覽器有支援,
在input element內設定type="number",chrome與firefox就可以用選的(spinner)。
但是...,IE 11跟Edge雖然有支援numeric,但沒有實作spinner XD。
如果不想自己寫css跟js,可以使用jQuery.UI提供的spinner,demo按此。
或是Number polyfill。
這裡使用jQuery.UI的spinner來試試。
首先使用NuGet或自行下載jQuery.UI package,目前最新版為1.12.1,有相依於jQuery。
再include jquery-ui.css與jquery-ui-1.12.1.js。
這裡遵照unobtrusive的原則,將HTML跟JS分開。
MVC 5.1後,EditorFor可以加HTML attribute的object了。
也可以建立專用的EditorTemplates,類似需求直接掛屬性即可。
執行看看,IE跟Edge都有spinner了。
參考資料:
http://html5please.com/#number
https://docs.microsoft.com/en-us/aspnet/mvc/overview/releases/mvc51-release-notes#new-features
沒有留言:
張貼留言