Select input text by its value

Asked

Viewed 828 times

2

I would like to select an input type text field that contains the word "hi" typed in it.

Assuming my input is this:

<input type='text' id='texto' />

I saw that it is possible through:

$("#texto[value='oi']")

But I saw that it only works if the value is explicit in the attribute "value". It does not happen most of the time.

Have some other selector for me to achieve this without having to set the input value attribute?

javascript jquery

  • What do you mean? You have to know the value to select by it

  • Exactly. In this case the word "hi" to serve as an example.

  • I didn’t understand this: "...without having to set the input value attribute?"

  • If an input is written like this: <input type='text' value='Blabla' /> I can pick it up with the $("input[value='Blabla']") selector, but if the input is written <input type='text' /> and I type the Blabla text, the $("input[value='Blabla']") selector, nothing is found. Realized the difference?

  • @Lucas The issue is text typed by the user, I believe.

2 answers

4


Cannot do this. Selectors act similarly to CSS, on elements and attributes that are in the DOM.

You will need to select the elements you want manually, as indicated in this reply in the SOEN:

var inputsEscritoOi = $('input').filter(function() {
    return $(this).val().indexOf('oi');
});

If you want some ease in using this, you can even create a jQuery plug-in:

$(function() {
  $("#colorir").on("click", function() {
    $("input").valContain("oi").css({
      color: "red"
    });
  });
});

(function($) {
    $.fn.valContain = function(str) {
      return this.filter(function() {
        return $(this).val().indexOf(str) >= 0;
      });
    };
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<button id="colorir">colorir</button>

  • 1

    I was trying to come up with an answer, but it’s going to look just like yours... I already did, but because you use the indexOf() instead of $(this).val() === 'oi' ? It is that in this way the value is exact, whereas with indexOf() just needs to contain oi!

  • The question is ambiguous... in the first line the author said "that contains hi", but then in his example he used "#texto[value='oi']". Then I didn’t know what to do, and I decided to post the less obvious answer... like it’s easier to know that there is == than indexOf (I think). That was the reason.

  • OK! OK! I was confused by the reverse of why you were confused! : P (and +1 by walking mt quickly responding and correctly)

  • @Zuul Thanks for the feedback! = D

  • Really the way I wrote implies that I wanted inside the input in any part of the text to find 'hi'. It wasn’t, but you managed to go beyond what I expected. + 1.

0

Can traverse the input[type="text"] checking whether the value of it is "hi".

$('input[type="text"]').each(function(e){
    if($(this).val() == 'oi'){
       // faz algo
    }
});


$(function(){
    $('#selecionar').on('click', function(){
        $('input[type="text"]').each(function(e){
            if($(this).val() == 'oi'){
                $(this).toggleClass('selecionado');
            }
        });
    });
});
.selecionado{border-color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<input type='text' value='foo'/>
<input type='text' value='bar'/>
<input type='text' value='oi'/>
<input type='text' value='baz'/>

<button id='selecionar'>Selecionar 'oi'</button>

Browser other questions tagged javascript jquery

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