1

i have input with type number like this

<input type="number" class="number" min="0" max="999999" value="0" id="id">

when i use this code 

$("#id").val();

if it's number like 1 it return the number

but if not a number like 1+1 it return empty string ""

so can i get the actual value with type number or i have to change to text to do so

i test it with chrome and firefox

i know that it will work with type text

but i'm looking to faster solution if there are non then i will change it to text and rewrite the code

here is my question now when i change the type to text using jquery it remove the value can i change it without remove the value ?

$('#id').attr('type','text')

what i want to do is make the type text get the value and return it back to number

Robert
  • 2,342
  • 2
  • 24
  • 41

3 Answers3

2

You can not do it with <input type='number'/>,

<input type="number" > will expect you to put a number, so if you put anything like 1+1, it is not considered a number, so returns an empty string "".

you can instead use <input type=text/>

See this fiddle

$('input').on('change', function() {
  var strVal = $("#id").val();
  var intVal = eval(strVal);
  alert(intVal);

})
  

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="number" value="0" id="id">

Edit:

if you cant change whole html, you can change type of the element using jquery,

$('input[type=number]').attr('type','text')

just put this on page load

Naeem Shaikh
  • 15,331
  • 6
  • 50
  • 88
  • i know that using text will solve it but i build the site with number now i must rewrite the whole code again – Robert Mar 13 '15 at 11:19
  • @robert.. yes you must rewrite the code again, since input type number will simply discard any NAN value from it – Naeem Shaikh Mar 13 '15 at 11:20
  • the thing is not i can't change it because it will take time to change `number` to `text` it will take time cause my code depend on the type `number` and the width of the inputs will take more because when i limit the value to 99999 it take smaller width but when it back it will take wider width i know i can fix it again to be just like it now with type text but it need time – Robert Mar 13 '15 at 11:36
  • in that case you will need to spend time on it.. there is no way you can support + sign inside input number – Naeem Shaikh Mar 13 '15 at 11:38
  • @robert see this fiddle http://jsfiddle.net/naeemshaikh27/ob5t6tyx/2/ .. value is retained there, you need to change type to text before user starts inputing values in it.. nut when he enters anything.. usually you do it on page load – Naeem Shaikh Mar 13 '15 at 11:48
  • I have the same need. The point is that on mobile type="number" will show the digits pad, this is a WANTED feature, instead when type text, the mobile shows the keyboard letters. So the question could turn in: how to validate user input on submit in a type="number"? And one more: how to validate user input on a paste action in a type="number"? This second question is a need too, because the user can paste a number copied from somewhere else but it may end containing dashes, blank spaces and others chars – Robert Jun 12 '21 at 04:52
1

If someone needs an input type="number" , there is a reason.

Premise: I'm not the same Robert that made the initial question :-)

but ...

I was exactly in the same situation of the Robert who made the initial question ( destiny matter? ), anyway

making a deeper research, I have found this answer JavaScript get clipboard data on paste event (Cross browser)

I beloved that twice because, nevertheless, it is pure vanilla javascript

I have made this code with input type = "number" and it works like a charm

The main behavior because I want input type = "number" is that this input type, when focused ON MOBILE will open the numbers pad INSTEAD than the letters keyboard. Here the input is driven, you can press only numbers and dashes

But in my app , they can paste the number.. so having a check on the paste event, is a logical consequence

try it

function handlePaste (e) {
    var clipboardData, pastedData;

    // Stop data actually being pasted into div
    e.stopPropagation();
    e.preventDefault();

    // Get pasted data via clipboard API
    clipboardData = e.clipboardData || window.clipboardData;
    pastedData = clipboardData.getData('Text');
    
    // Do whatever with pasteddata
    alert(pastedData);
}

document.getElementById('myInput').addEventListener('paste', handlePaste);
<p>This example uses the addEventListener() method to attach a "paste" event to an input type="number" element. Paste some text in the input...</p>

<input type="number" id="myInput" value="Try to paste something in here" size="40">
Robert
  • 490
  • 1
  • 5
  • 17
0

OK Solution to your problem

$('input[type=number]').each(function(){
  var val = $(this).val();
  $(this).attr('type','text');
  $(this).val(val);
});

above code will work on all inputs with type number. If you want to use only one use class or id in first line. If you want to count value from string like 1+1 u can use eval in try catch block. But this is generally a lot more complicated solution.

Maciej Paprocki
  • 1,230
  • 20
  • 29