What events does an <input type="number" /> fire when its value is change ?

Question

my question is 

What events does an <input type="number" /> fire when its value is changed ?

I working on .net application asp.net mvc . I using input text numbers have up and down arrows 

up increase and down decrease 

which event fire when press on this two arrows

@Html.EditorFor(model => model.DirectManager, new { htmlAttributes = new { @class = "form-control", id = "txtDirectManagerId" } })

and this property as below 

public class requester

{

public int DirectManager{get;set;}

}

so what event i will use when call jquery api

 $(document).ready(function () {
        $("#txtLineManagerId").autocomplete({
            source: function (request, response) {
                var searchText = $("#txtLineManagerId").val();
                console.log("search text" + searchText)
                $.ajax({
                    url: '@Url.Action("GetAllEmployeeBasedSearchText", "Resignation")',
                    data: { searchText: searchText },
                    method: "GET",
                    dataType: "json",
                    success: function (data) {
                        /* console.log("data is " + data);*/
                        response($.map(data, function (item) {
                            console.log("data is" + item.EmployeeID);
                            /*$('#LineManagerName').val(item.EmployeeName);*/
                           // $('#LineManagerName').html(item.EmployeeName);
                            return { label: item.EmployeeID, value: item.EmployeeID, employeeName: item.EmployeeName };

                        }))

                    }
                });
            },
            position: { my: "right top", at: "right bottom" },
            appendTo: '#searchContainer',
            select: function (event, ui) {
                // Update LineManagerName input with the selected Employee Name
                $("#LineManagerName").val(ui.item.employeeName);
                $("#selectedEmployeeName").val(ui.item.employeeName);
            },
            minLength: 4,
           // appendTo: "#searchContainer"
        });
  });

Answer 1

Hi @Ahmed Abd El Aziz,

The answers to your three questions all have to do with the onchange event.

The onchange event occurs when the value of an HTML element is changed.

@Html.EditorFor(model => model.DirectManager, new { htmlAttributes = new { onchange = "OnChangeEvent()", @class = "form-control", id = "txtDirectManagerId" } })

<script>
    function OnChangeEvent() {
        alert("value is changed");

    }
</script>

<input type="number" onchange="myFunction()" />

<script>
  function  myFunction(){
      alert("change");
    }  
</script>

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

There are several events you could use, but you probably want the oninput event:

https://www.w3schools.com/jsref/event_oninput.asp