如何在搜索栏输入中用“ - ”更改空格

When I insert a text I want to change space with "-" in a search bar (from "Samsung S7 Edge" to "Samsung-S7-Edge"). Here is my code :

<!-- BEGIN: search -->
<div id="search">
   <form action="{INSTALLDIR}index.php" method="get" name="searchprod" id="prodsearch">
      <table cellpadding="0" cellspacing="0" border="0">
         <tr>
            <td><input name="ps" type="text" id="searchbox" value="Cauta produse...ex. samsung-s7-edge" onfocus="this.value=''; this.style.color='#333333';" />
               <input type="hidden" name="sv" value="1" />
            </td>
            <td><input type="submit" value="Cauta" class="searchButton" /></td>
         </tr>
      </table>
   </form>
</div>
<!-- END: search -->

I created a jsfiddle - which should work.

So what it is doing:

If a person is triggering the keypress event and the character typed is a space (char 32) I prevent the event and instead get the current value of the field and add a dash -.

What it is not doing:

If someone is pasting text, there is no keypress event and therefore no replacing of the space character.

You should use one of the keyboard related events, that occur in this sequence:

1. onkeydown (when the user is pressing a key)
2. onkeypress (when the user presses a key)
3. onkeyup (when the user releases a key)

Here you have plenty of info on javascript key events, or if you are using jquery key events