MVC HTML Helper Input Type Number using Safari!

Posted on 2014-03-13
Last Modified: 2014-03-20
I'm understanding that a Numeric pad instead of the default keyboard will open in Safari on iPhone if I code like:
           <input id="amount" type="number" />

I would like to know if this is possible in MVC4 like so:
          @Html.EditorFor(m => m.Expense.Amount, new { type = "number" })

I've also read about including the DataType attribute like so. Just don't know if it will trigger the numeric pad in Safari on iPhone:

          public decimal Amount { get; set; }
Question by:WorknHardr
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
LVL 21

Accepted Solution

Craig Wagner earned 500 total points
ID: 39927834
I'm not entirely sure what you're asking here. If specifying type="number" on the <input> element causes the numeric keypad then it doesn't matter what the server-side technology is, it only matter what gets generated. This doesn't seem all that hard to test, I just did it in about five minutes by creating a new MVC application. Using your code I got:

<input class="text-box single-line" data-val="true" data-val-number="The field Amount must be a number." data-val-required="The Amount field is required." id="Expense_Amount" name="Expense.Amount" type="text" value="0.00" />

So the answer would appear to be "no, it won't generate the HTML you want because the type attribute is "text."

I then tried using:

@Html.TextBoxFor( m => m.Expense.Amount, new { type = "number" } )

Open in new window

When I did that the result was:

<input data-val="true" data-val-number="The field Amount must be a number." data-val-required="The Amount field is required." id="Expense_Amount" name="Expense.Amount" type="number" value="0" />

So it would appear that using TextBoxFor will generate what you want.

Frankly, it took me longer to type this answer than to put together the test that got me the results.

Author Comment

ID: 39927909
I'm using Html.EditorFor

Author Closing Comment

ID: 39943439

Featured Post

Enroll in July's Course of the Month

July's Course of the Month is now available! Enroll to learn HTML5 and prepare for certification. It's free for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Lots of people ask this question on how to extend the “MembershipProvider” to make use of custom authentication like using existing database or make use of some other way of authentication. Many blogs show you how to extend the membership provider c…
Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
Michael from AdRem Software outlines event notifications and Automatic Corrective Actions in network monitoring. Automatic Corrective Actions are scripts, which can automatically run upon discovery of a certain undesirable condition in your network.…
In this brief tutorial Pawel from AdRem Software explains how you can quickly find out which services are running on your network, or what are the IP addresses of servers responsible for each service. Software used is freeware NetCrunch Tools (https…

623 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question