5

I'm writing a little javascript utility that does some numeric calculations. Almost all of the inputs are true numbers (that is, I'm doing math with them; they're not zip codes or somesuch). Some of these numbers represent modifiers to be added to other numbers before calculation. I would like for these numbers to be displayed signed, with a leading plus sign if the value is greater than zero. This works fine in Firefox and IE, which don't do anything special with number inputs. Chrome, however, does not allow the plus character in the value of a number input, although parseFloat can handle it just fine. Right now, my code is manually prepending a + to the field's value, which causes it to break in Chrome.

Is there any way to get this working in Chrome? Apparently (CSS content generation before or after 'input' elements) :before will not avail me here. Ideally, I'd like to keep the number type; if all else fails, I can just use text, but I'm relying on the min, max, and step attributes.

UPDATE: Adding novalidate to the field allows the plus sign, but then Chrome will claim a value of the empty string. Inspecting the element, I can't see any way to get at the displayed value when it's invalid, even with novalidate.

UPDATE: It seems that there is no nice way to get the value from an invalid field (How to get the raw value an <input type="number"> field?). And validation confirms that the min, max, and step attributes are not allowed for input[type=text]. Unless I come up with something else, I'll probably just abandon the plus signs.

Sebastian Simon
  • 18,263
  • 7
  • 55
  • 75
Thom Smith
  • 13,916
  • 6
  • 45
  • 91

2 Answers2

0

I had the same problem too. I used a workaround with pattern and type="tel" to trigger the numeric keyboard on mobile device

josedlujan
  • 5,357
  • 2
  • 27
  • 49
Gilles Calzone
  • 1
-1

I tried number with plus sign. It seem to work in Chrome

<div ng-app>
<div ng-controller="PatternTestCtrl">
    <form name="ngform">
        <input type="number" name="numVal" ng-model="numValModel" ng-pattern="/[0-9]{5}/" maxlength="5" ng-maxlength="5"/>
    </form>
</div>
</div>
http://jsfiddle.net/jdev_hari/1c4te0cw/1/

My browser version is Version 37.0.2062.124 m. Is this still an issue?

Hari
  • 117
  • 2
  • 15
  • It doesn't work. Try entering "+42" and then clicking the increment arrow. The field resets, because the + sign prevents Chrome from interpreting the string as a valid number value. – Thom Smith Oct 23 '14 at 17:56