2017年9月20日 星期三

[.Net MVC/jQuery] add TextBox Numeric/Spinner

說明:
如果想讓TextBox(input element)可以用選的,如下圖:




該怎麼做呢?

作法:
HTML 5有支援Number input type按此可知那些瀏覽器有支援,
在input element內設定type="number",chrome與firefox就可以用選的(spinner)。
但是...,IE 11Edge雖然有支援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