Read input

Asked

Viewed 208 times

0

I’m trying to read the text within a field input, but it’s not working, which could be wrong?

My code:

<input type="text" id=-"campo-de-busca" onKeyPress="teclaPressionada()" placeholder="Nome">

function teclaPressionada()
{
    var texto = $("#campo-de-busca").val();
    alert(texto);
}

javascript
  • 4

    And what is the input? When the function teclaPressionada is executed?

  • Are you sure you’re calling the function teclaPressionada ?

  • I entered my input field

  • 1

    exchange id=-"search field" for id="search field"

  • @abduzeedo he is recognizing the "-" as the name of the field

  • 1

    Guys, sorry about this silly mistake.

Show 1 more comment

3 answers

2


You can use the events named Keyboard Events that are these :

  • KEYDOWN

The Event keydown is sent to an element when the user presses a key on the keyboard. If the key is held down, the event is sent whenever the operating system repeats the key.

KEYDOWN EVENT JQUERY

  • KEYPRESS

The keypress Event is sent to an element when the browser registers the keyboard input.

KEYPRESS EVENT JQUERY

  • KEYUP

The keyup Event is sent to an element when the user releases a key on the keyboard. KEYUP EVENT JQUERY

Below you can see an example using jQuery and the above mentioned events.

You can change the event to keypress or keydown

$(function(){
  $('#teste').on('keyup',function(){
    console.log(this.value);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="teste">

  • 1

    Reason for the negative vote ?

  • Thanks friend and sorry for the silly mistake, I did not notice the (-) before the iguaql sign

  • the first keystroke does not return anything

  • If that was the reason the negative vote was just comment, I left very specific that can change the event to keyup for example, this would make the first key return something.

  • 1

    I only put "if that was the reason" because some people in the community instead of giving a feedback done their only put the negative and we do not know where we went wrong to improve the next answer understand ? As I am new to the community I need to recognize my mistakes. @Leocaracciolo

  • 1

    I understand, I am against giving negative votes without explanation. This helps nothing and nobody.

  • Another thing, if there are multiple inputs on the page, everyone will perform the function. Best by id

  • @Leocaracciolo This is my fault, sometimes I forget to leave very specific because someone who is 'beginner' can easily fall into this error. I will edit the answer.

  • that’s it, just to show that instead of negativity is better to help alerting in the comments

  • 1

    Example, there are 2 negatives in my answer only that I am trying to help and not disturb, why not inform here the reason... until discourages the person.

  • 1

    +1 given to meet the comments, in addition to the answer now be ok :)

  • Thanks for the feedback @Andersoncarloswoss will right now edit my reply to improve understanding of all.

  • 1

    @Andersoncarloswoss changed my answer, see if it improved, anything informs me so that I always improve.

Show 8 more comments

1

has a - in your field id

<input type="text" id="campo-de-busca" onKeyPress="teclaPressionada()" placeholder="Nome">

but what you would not be onclick instead of onkeypress?

  • 1

    I want to pick the values inside the input when pressing the key

  • all right! I understood that it would be the total value of the input, hence you would need another javascript call, but if it is to each letter, then you should use onKeyPress itself..

0

The solution to your problems is through

  • a correction to the id attribute value of your HTML input from -"campo-de-busca" for "campo-de-busca". Note that you have a hyphen right after the equals signal.
  • Change the event onKeyPress for onkeyup so that the function is triggered as soon as the key is pressed.

function teclaPressionada()
{
    var texto = $("#campo-de-busca").val();
    console.log(texto);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="campo-de-busca" onkeyup="teclaPressionada()" placeholder="Nome">

For more details about differences between Onkeyup, Onkeydown and Onkeypress see this one Post

With jquery

var userTyped = '';
$(document).ready(function(){
$("#campo-de-busca").keypress(function(e){
userTyped += String.fromCharCode(e.which);
console.log(userTyped);
});
$( "#campo-de-busca" ).focus();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="campo-de-busca" placeholder="Nome">

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.