Mobile Number Field Inputs

  • 1
  • Question
  • Updated 2 months ago
  • Answered
Trying to get Number Inputs on a mobile field editor to display like the image below instead of the default text box.

Does anyone know how to do this, or has a field renderer that could do the trick?


Photo of Mansour

Mansour

  • 1,932 Points 1k badge 2x thumb

Posted 2 months ago

  • 1
Photo of Jeff Rutter

Jeff Rutter

  • 1,162 Points 1k badge 2x thumb
Mansour....we have done this recently. Here's the code I used. 

FIrst create a snippet 

then on the number field give it a css class of numberonly.

See code below.

var $ = skuid.$;$(".numberonly").find("input").on("click touchstart",function(){
                $(this).attr({"type":"number", "pattern":"[0-9]*"});
});

hope this helps!

Jeff Rutter


(Edited)
Photo of Jeff Rutter

Jeff Rutter

  • 1,162 Points 1k badge 2x thumb
as a warning....this is sometimes slightly buggy and may jump back to the other keyboard, but has done the trick for our needs (we are using Ipads)!
Photo of Mansour

Mansour

  • 1,932 Points 1k badge 2x thumb
Hi Jeff,

Trying to implement your solution now, but running into a snag.

Is there a CSS class I should be creating?
Should I be using this JS snippet as a custom renderer?
Photo of Jeff Rutter

Jeff Rutter

  • 1,162 Points 1k badge 2x thumb
sorry! Actually you don't need a css class. Just give the field the css class referenced in the code snippet. 

And no need to override the field with the js snippet as a custom renderer. We just had tabs and whenever the tab was shown we ran the snippet I shared. Maybe you could run it on page load instead, but we didn't have that use case. 

-Jeff
Photo of Mansour

Mansour

  • 1,932 Points 1k badge 2x thumb
Got it working.
Thank you very much!
Photo of Jeff Rutter

Jeff Rutter

  • 1,162 Points 1k badge 2x thumb
Great! Glad to help a fellow Skuid user out! :)
Photo of Matthew Leahy

Matthew Leahy, Employee

  • 592 Points 500 badge 2x thumb
Hey Jeff, I just wanted to thank you for your contributions on the community. We appreciate it.
Photo of Jeff Rutter

Jeff Rutter

  • 1,162 Points 1k badge 2x thumb
You're welcome, Matthew!