0

I'm trying to do this in HTML for now where I have a input field of type=number where I don't want the user to be able to type decimal values/special characters/alphabets at all. I also want the min=30 and max=300so if a user types 29 and clicks else where, the value in the field should change to the min which is 30. If the user types in a value greater than 300 and clicks elsewhere, then I want the value to change to 300 which is the max. I don't want to wait for the user to wait for them to click on a form button. This is what I have so far, where the error is that, the user can still type decimal, and type any value lower than 30. Very new to html/js. Feel free to help me with js implementation if you think that is easier.

<input type="number" min="30" max="300" step="1" oninput="validity.valid||(value=value.replace(/\D+/g, ''))" id="seconds" name="seconds" value="30">
befb
  • 21
  • 4
  • `.reportValidity()` in the `oninput` should/could work -> [Manually Triggering Form Validation using jQuery](https://stackoverflow.com/questions/7548612/manually-triggering-form-validation-using-jquery) – Andreas Mar 05 '21 at 14:21
  • @Andreas that's javascript, right? could you show me how exactly? i couldn't understand much from the link. – befb Mar 05 '21 at 14:23
  • @Andreas again, I don't want to wait for the button to be clicked on for the input to be validated. – befb Mar 05 '21 at 14:27
  • _"that's javascript, right?"_ - Like the stuff in your `oninput` attribute. _"I don't want to wait for the button to be clicked"_ hence I've written _"in the `oninput`"_, just like you do right now. – Andreas Mar 05 '21 at 14:33
  • @Andreas understood! could you show me how to implement it with my case? I really couldn't understand from the online documentation. i'd really appreciate it – befb Mar 05 '21 at 14:37

1 Answers1

3

<html>

<script>

    function change(){

        var inp  = document.getElementById("box").value;
        
            inp = Math.floor(inp);  
            if(inp<30){

            document.getElementById("box").value = 30;

        }

            else if(inp>300){

            document.getElementById("box").value = 300;

        }
        else {
            document.getElementById("box").value = inp;
        }
    }

                

</script>

<BODY>

<input type= "number" onmouseout = "change()" id ="box"/>

</BODY>

</HTML>

this java script should do use "onmouseout".

Akash Sinha
  • 130
  • 2
  • 4
  • what do you mean by use "onmouseout"? how would I implement that? can you show me? – befb Mar 05 '21 at 15:31
  • onmouseout is an used to check if mouse is over an element – Akash Sinha Mar 06 '21 at 05:51
  • just use that *script's* function and its Java Script inside it and add it in header section. Then add *onmouseout* in place of your *onclick* attribute. – Akash Sinha Mar 06 '21 at 05:58
  • if you don't get it just copy change function from here. Paste it in your header's script tag. Do the same for input tag. don't copy anything else. Then your problem should be solved. – Akash Sinha Mar 06 '21 at 06:02