javascript oninput: press onekey multiple event fired












0















i'm just starting a typing text project not for english typing text. it's only for Bengali language. my typing project is 99% done for english language but in Bengali language i found a tiny but a big problem.



i have a input box that will match all the word one by one. you type a word and press space it will check the word for matching and after that move for the next word. it's work fine.



how i check that:in inputbox oninput event event.data === " " than move to the next word.



but in Bengali language when i press the key "c" (not as first character but in the middle of word first character) its fired the oninput event multiple time. with various event.data value include the space also. that's why when press c in keyboard its just go to the next word.



now you cannot find out the multiple event in the console because you don't have the software in your machine. so for that i include a screen short of this:
see_the_picture_for_butter_understanding



onkeyup event problem: see_the_picture



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>

<style>
@font-face {
font-family: 'SutonnyMj';
src: url('assets/fonts/SutonnyMj.ttf'),
url('assets/fonts/sutonnymj.woff2') format('woff2'),
url('assets/fonts/sutonnymj.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#textbox {
width: 200px;
height: 200px;
font-family: 'SutonnyMj';
font-size: 50px;
}
</style>


<body>
<textarea id="textbox" type="text"></textarea>
<script>
var textBox = document.getElementById("textbox");
textBox.oninput = function(e) {
console.log(event); // multiple event fire when the Software is Enable
if(event.data === " ") {
// move_to_the_next_word();
}
}
</script>
</body>
</html>


Notes: It's happen because i use a software called Bijoy Bangla for writing Bengali. (It's require for Bengali Typing Test)










share|improve this question

























  • Welcome to StackOverflow!. Please note that oninput event is fired after each and every change that occurs in the textarea. So it is normal to execute when you type any character. w3schools.com/jsref/event_oninput.asp

    – Ahmad
    Nov 26 '18 at 7:42
















0















i'm just starting a typing text project not for english typing text. it's only for Bengali language. my typing project is 99% done for english language but in Bengali language i found a tiny but a big problem.



i have a input box that will match all the word one by one. you type a word and press space it will check the word for matching and after that move for the next word. it's work fine.



how i check that:in inputbox oninput event event.data === " " than move to the next word.



but in Bengali language when i press the key "c" (not as first character but in the middle of word first character) its fired the oninput event multiple time. with various event.data value include the space also. that's why when press c in keyboard its just go to the next word.



now you cannot find out the multiple event in the console because you don't have the software in your machine. so for that i include a screen short of this:
see_the_picture_for_butter_understanding



onkeyup event problem: see_the_picture



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>

<style>
@font-face {
font-family: 'SutonnyMj';
src: url('assets/fonts/SutonnyMj.ttf'),
url('assets/fonts/sutonnymj.woff2') format('woff2'),
url('assets/fonts/sutonnymj.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#textbox {
width: 200px;
height: 200px;
font-family: 'SutonnyMj';
font-size: 50px;
}
</style>


<body>
<textarea id="textbox" type="text"></textarea>
<script>
var textBox = document.getElementById("textbox");
textBox.oninput = function(e) {
console.log(event); // multiple event fire when the Software is Enable
if(event.data === " ") {
// move_to_the_next_word();
}
}
</script>
</body>
</html>


Notes: It's happen because i use a software called Bijoy Bangla for writing Bengali. (It's require for Bengali Typing Test)










share|improve this question

























  • Welcome to StackOverflow!. Please note that oninput event is fired after each and every change that occurs in the textarea. So it is normal to execute when you type any character. w3schools.com/jsref/event_oninput.asp

    – Ahmad
    Nov 26 '18 at 7:42














0












0








0








i'm just starting a typing text project not for english typing text. it's only for Bengali language. my typing project is 99% done for english language but in Bengali language i found a tiny but a big problem.



i have a input box that will match all the word one by one. you type a word and press space it will check the word for matching and after that move for the next word. it's work fine.



how i check that:in inputbox oninput event event.data === " " than move to the next word.



but in Bengali language when i press the key "c" (not as first character but in the middle of word first character) its fired the oninput event multiple time. with various event.data value include the space also. that's why when press c in keyboard its just go to the next word.



now you cannot find out the multiple event in the console because you don't have the software in your machine. so for that i include a screen short of this:
see_the_picture_for_butter_understanding



onkeyup event problem: see_the_picture



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>

<style>
@font-face {
font-family: 'SutonnyMj';
src: url('assets/fonts/SutonnyMj.ttf'),
url('assets/fonts/sutonnymj.woff2') format('woff2'),
url('assets/fonts/sutonnymj.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#textbox {
width: 200px;
height: 200px;
font-family: 'SutonnyMj';
font-size: 50px;
}
</style>


<body>
<textarea id="textbox" type="text"></textarea>
<script>
var textBox = document.getElementById("textbox");
textBox.oninput = function(e) {
console.log(event); // multiple event fire when the Software is Enable
if(event.data === " ") {
// move_to_the_next_word();
}
}
</script>
</body>
</html>


Notes: It's happen because i use a software called Bijoy Bangla for writing Bengali. (It's require for Bengali Typing Test)










share|improve this question
















i'm just starting a typing text project not for english typing text. it's only for Bengali language. my typing project is 99% done for english language but in Bengali language i found a tiny but a big problem.



i have a input box that will match all the word one by one. you type a word and press space it will check the word for matching and after that move for the next word. it's work fine.



how i check that:in inputbox oninput event event.data === " " than move to the next word.



but in Bengali language when i press the key "c" (not as first character but in the middle of word first character) its fired the oninput event multiple time. with various event.data value include the space also. that's why when press c in keyboard its just go to the next word.



now you cannot find out the multiple event in the console because you don't have the software in your machine. so for that i include a screen short of this:
see_the_picture_for_butter_understanding



onkeyup event problem: see_the_picture



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>

<style>
@font-face {
font-family: 'SutonnyMj';
src: url('assets/fonts/SutonnyMj.ttf'),
url('assets/fonts/sutonnymj.woff2') format('woff2'),
url('assets/fonts/sutonnymj.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#textbox {
width: 200px;
height: 200px;
font-family: 'SutonnyMj';
font-size: 50px;
}
</style>


<body>
<textarea id="textbox" type="text"></textarea>
<script>
var textBox = document.getElementById("textbox");
textBox.oninput = function(e) {
console.log(event); // multiple event fire when the Software is Enable
if(event.data === " ") {
// move_to_the_next_word();
}
}
</script>
</body>
</html>


Notes: It's happen because i use a software called Bijoy Bangla for writing Bengali. (It's require for Bengali Typing Test)







javascript






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 26 '18 at 9:23







kundefine

















asked Nov 26 '18 at 7:35









kundefinekundefine

12




12













  • Welcome to StackOverflow!. Please note that oninput event is fired after each and every change that occurs in the textarea. So it is normal to execute when you type any character. w3schools.com/jsref/event_oninput.asp

    – Ahmad
    Nov 26 '18 at 7:42



















  • Welcome to StackOverflow!. Please note that oninput event is fired after each and every change that occurs in the textarea. So it is normal to execute when you type any character. w3schools.com/jsref/event_oninput.asp

    – Ahmad
    Nov 26 '18 at 7:42

















Welcome to StackOverflow!. Please note that oninput event is fired after each and every change that occurs in the textarea. So it is normal to execute when you type any character. w3schools.com/jsref/event_oninput.asp

– Ahmad
Nov 26 '18 at 7:42





Welcome to StackOverflow!. Please note that oninput event is fired after each and every change that occurs in the textarea. So it is normal to execute when you type any character. w3schools.com/jsref/event_oninput.asp

– Ahmad
Nov 26 '18 at 7:42












2 Answers
2






active

oldest

votes


















0














As mentioned by @Ahmad 'input' event is fired after each change, but you can be more specific using 'keyup' event which will provide you more control and attributes for event object. For example you will be able to handle 'Space' using event.which statement. Here an example:



var textBox = document.getElementById("textbox");
textBox.onkeyup = function(e) {
console.log(event);
if(event.which === 32) { //space keycode
// move_to_the_next_word();
}
}





share|improve this answer
























  • cannot use keyup event. but i use this for testing purpose it also return event.which === 32 when i press c in the keyboard because its returning the space which has value of event.which = 32.

    – kundefine
    Nov 26 '18 at 8:01











  • Sorry, didn't understood which key you pressed for the same keycode? Also you are restricted to use only oninput event? Why?

    – dganenco
    Nov 26 '18 at 8:06











  • now you will understand what i trying to said see the picture i.stack.imgur.com/IhpQl.jpg

    – kundefine
    Nov 26 '18 at 9:25



















0














Try this!






function runScript(e) {
if (e.keyCode == 67) {//c
console.log("you have entred 'c' char")
}
if(e.keyCode == 32){//space
console.log("space ")
}

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input id="scriptBox" type="text" onkeyup="return runScript(event)" />








share|improve this answer

























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53476534%2fjavascript-oninput-press-onekey-multiple-event-fired%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    2 Answers
    2






    active

    oldest

    votes








    2 Answers
    2






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0














    As mentioned by @Ahmad 'input' event is fired after each change, but you can be more specific using 'keyup' event which will provide you more control and attributes for event object. For example you will be able to handle 'Space' using event.which statement. Here an example:



    var textBox = document.getElementById("textbox");
    textBox.onkeyup = function(e) {
    console.log(event);
    if(event.which === 32) { //space keycode
    // move_to_the_next_word();
    }
    }





    share|improve this answer
























    • cannot use keyup event. but i use this for testing purpose it also return event.which === 32 when i press c in the keyboard because its returning the space which has value of event.which = 32.

      – kundefine
      Nov 26 '18 at 8:01











    • Sorry, didn't understood which key you pressed for the same keycode? Also you are restricted to use only oninput event? Why?

      – dganenco
      Nov 26 '18 at 8:06











    • now you will understand what i trying to said see the picture i.stack.imgur.com/IhpQl.jpg

      – kundefine
      Nov 26 '18 at 9:25
















    0














    As mentioned by @Ahmad 'input' event is fired after each change, but you can be more specific using 'keyup' event which will provide you more control and attributes for event object. For example you will be able to handle 'Space' using event.which statement. Here an example:



    var textBox = document.getElementById("textbox");
    textBox.onkeyup = function(e) {
    console.log(event);
    if(event.which === 32) { //space keycode
    // move_to_the_next_word();
    }
    }





    share|improve this answer
























    • cannot use keyup event. but i use this for testing purpose it also return event.which === 32 when i press c in the keyboard because its returning the space which has value of event.which = 32.

      – kundefine
      Nov 26 '18 at 8:01











    • Sorry, didn't understood which key you pressed for the same keycode? Also you are restricted to use only oninput event? Why?

      – dganenco
      Nov 26 '18 at 8:06











    • now you will understand what i trying to said see the picture i.stack.imgur.com/IhpQl.jpg

      – kundefine
      Nov 26 '18 at 9:25














    0












    0








    0







    As mentioned by @Ahmad 'input' event is fired after each change, but you can be more specific using 'keyup' event which will provide you more control and attributes for event object. For example you will be able to handle 'Space' using event.which statement. Here an example:



    var textBox = document.getElementById("textbox");
    textBox.onkeyup = function(e) {
    console.log(event);
    if(event.which === 32) { //space keycode
    // move_to_the_next_word();
    }
    }





    share|improve this answer













    As mentioned by @Ahmad 'input' event is fired after each change, but you can be more specific using 'keyup' event which will provide you more control and attributes for event object. For example you will be able to handle 'Space' using event.which statement. Here an example:



    var textBox = document.getElementById("textbox");
    textBox.onkeyup = function(e) {
    console.log(event);
    if(event.which === 32) { //space keycode
    // move_to_the_next_word();
    }
    }






    share|improve this answer












    share|improve this answer



    share|improve this answer










    answered Nov 26 '18 at 7:47









    dganencodganenco

    22118




    22118













    • cannot use keyup event. but i use this for testing purpose it also return event.which === 32 when i press c in the keyboard because its returning the space which has value of event.which = 32.

      – kundefine
      Nov 26 '18 at 8:01











    • Sorry, didn't understood which key you pressed for the same keycode? Also you are restricted to use only oninput event? Why?

      – dganenco
      Nov 26 '18 at 8:06











    • now you will understand what i trying to said see the picture i.stack.imgur.com/IhpQl.jpg

      – kundefine
      Nov 26 '18 at 9:25



















    • cannot use keyup event. but i use this for testing purpose it also return event.which === 32 when i press c in the keyboard because its returning the space which has value of event.which = 32.

      – kundefine
      Nov 26 '18 at 8:01











    • Sorry, didn't understood which key you pressed for the same keycode? Also you are restricted to use only oninput event? Why?

      – dganenco
      Nov 26 '18 at 8:06











    • now you will understand what i trying to said see the picture i.stack.imgur.com/IhpQl.jpg

      – kundefine
      Nov 26 '18 at 9:25

















    cannot use keyup event. but i use this for testing purpose it also return event.which === 32 when i press c in the keyboard because its returning the space which has value of event.which = 32.

    – kundefine
    Nov 26 '18 at 8:01





    cannot use keyup event. but i use this for testing purpose it also return event.which === 32 when i press c in the keyboard because its returning the space which has value of event.which = 32.

    – kundefine
    Nov 26 '18 at 8:01













    Sorry, didn't understood which key you pressed for the same keycode? Also you are restricted to use only oninput event? Why?

    – dganenco
    Nov 26 '18 at 8:06





    Sorry, didn't understood which key you pressed for the same keycode? Also you are restricted to use only oninput event? Why?

    – dganenco
    Nov 26 '18 at 8:06













    now you will understand what i trying to said see the picture i.stack.imgur.com/IhpQl.jpg

    – kundefine
    Nov 26 '18 at 9:25





    now you will understand what i trying to said see the picture i.stack.imgur.com/IhpQl.jpg

    – kundefine
    Nov 26 '18 at 9:25













    0














    Try this!






    function runScript(e) {
    if (e.keyCode == 67) {//c
    console.log("you have entred 'c' char")
    }
    if(e.keyCode == 32){//space
    console.log("space ")
    }

    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <input id="scriptBox" type="text" onkeyup="return runScript(event)" />








    share|improve this answer






























      0














      Try this!






      function runScript(e) {
      if (e.keyCode == 67) {//c
      console.log("you have entred 'c' char")
      }
      if(e.keyCode == 32){//space
      console.log("space ")
      }

      }

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
      <input id="scriptBox" type="text" onkeyup="return runScript(event)" />








      share|improve this answer




























        0












        0








        0







        Try this!






        function runScript(e) {
        if (e.keyCode == 67) {//c
        console.log("you have entred 'c' char")
        }
        if(e.keyCode == 32){//space
        console.log("space ")
        }

        }

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <input id="scriptBox" type="text" onkeyup="return runScript(event)" />








        share|improve this answer















        Try this!






        function runScript(e) {
        if (e.keyCode == 67) {//c
        console.log("you have entred 'c' char")
        }
        if(e.keyCode == 32){//space
        console.log("space ")
        }

        }

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <input id="scriptBox" type="text" onkeyup="return runScript(event)" />








        function runScript(e) {
        if (e.keyCode == 67) {//c
        console.log("you have entred 'c' char")
        }
        if(e.keyCode == 32){//space
        console.log("space ")
        }

        }

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <input id="scriptBox" type="text" onkeyup="return runScript(event)" />





        function runScript(e) {
        if (e.keyCode == 67) {//c
        console.log("you have entred 'c' char")
        }
        if(e.keyCode == 32){//space
        console.log("space ")
        }

        }

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <input id="scriptBox" type="text" onkeyup="return runScript(event)" />






        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited Nov 26 '18 at 9:41

























        answered Nov 26 '18 at 9:35









        the_ultimate_developerthe_ultimate_developer

        1,020822




        1,020822






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53476534%2fjavascript-oninput-press-onekey-multiple-event-fired%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Create new schema in PostgreSQL using DBeaver

            Deepest pit of an array with Javascript: test on Codility

            Costa Masnaga