0
<input readonly='readonly' id ='testid' name='testname' type='number' min ='1'>

I tried this one but not working. is there any way to do it? like using css or javascript.

my jsfiddle.

http://jsfiddle.net/jmasejo/vta96mp1/

superdb
  • 55
  • 1
  • 1
  • 14
  • 1
    Define “functioning” and “not working”. Your example is a readonly field with no value set on it. You prevent the user from giving it a value and don’t set any initial value, so how do you expect it to function? – Jukka K. Korpela Jan 02 '15 at 09:49
  • ahmm sorry for that. I just wanted to use a input type number that cant be edit, If i removed the read only it will work but you can edit the value. – superdb Jan 02 '15 at 09:53
  • that does not answer my question. If you mean that you want to prevent the user from *typing* a number, then you should say that in the question. (And that would mean deliberately reducing usability, but maybe this is a for a usability survey.) – Jukka K. Korpela Jan 02 '15 at 10:00
  • what @JukkaK.Korpela means is that u have to use the `value="somthing"` in order for the input to function as u want ,because without it simply = null. – ctf0 Jan 05 '15 at 03:30
  • the best answer found here https://stackoverflow.com/questions/17164278/disable-writing-in-input-type-number-html5 – Yousef Altaf Mar 07 '19 at 14:36

5 Answers5

4

This is from Disable writing in input type number HTML5, but it requires jQuery.

$("[type='number']").keypress(function (evt) {
    evt.preventDefault();
});

Without jQuery code is: (input is an input field)

input.onkeypress=function(evt){
    evt.preventDefault();
};
Community
  • 1
  • 1
TuomasK
  • 502
  • 3
  • 11
1

hello I have a working code but i think this is not the best way. I merged the answer from

How to disable backspace if anything other than input field is focused on using jquery

and the answer of TuomasK

here is the working code.

http://jsfiddle.net/vta96mp1/1/

HTML

<input class='testInput' id ='testid' value = '1' name='testname' type='number' min ='1'>

JS

$("#testid").keypress(function (evt) {
evt.preventDefault();
});

$(document).keydown(function(e) {
    var elid = $(document.activeElement).hasClass('textInput');
   console.log(e.keyCode + ' && ' + elid);
    //prevent both backspace and delete keys
    if ((e.keyCode === 8 || e.keyCode === 46) && !elid) {
        return false;
    };
});
yerlilbilgin
  • 3,041
  • 2
  • 26
  • 21
superdb
  • 55
  • 1
  • 1
  • 14
1

Try this one. It works for me. 

$("#testid").keypress(function (e) {
    e.preventDefault();
}).keydown(function(e){
    if ( e.keyCode === 8 || e.keyCode === 46 ) {
        return false;
    }
});
MiQui
  • 11
  • 1
0

<!DOCTYPE html>
<html>

<body>
  <p>A function is triggered when the user is pressing a key in the input field.</p>

  <input type="text" id="demo0">
  <input type="text" id="demo1">
  <input type="text" id="demo2" onkeypress="myFunction2()">


  <script language="javascript" type="text/javascript">
    document.getElementById("demo0").onkeypress = function() {
      myFunction0()
    };
    document.getElementById("demo1").addEventListener("keypress", myFunction1);

    function myFunction0() {
      document.getElementById("demo0").style.backgroundColor = "yellow";
    }

    function myFunction1() {
      document.getElementById("demo1").style.backgroundColor = "green";
    }

    function myFunction2() {
      document.getElementById("demo2").style.backgroundColor = "red";
    }
  </script>
</body>

</html>
ESP
  • 11
  • 3
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 28 '22 at 01:18
0

<!DOCTYPE html>
<html>

<body>
  <h1>No text & number</h1>
  <div>
    <input id="ESP" type="number" name="ESP" onKeypress="event.preventDefault();">
  </div>
</body>

</html>
ESP
  • 11
  • 3