2

Gostaria de selecionar um campo input type text que contenha a palavra "oi" digitada nele.

Supondo que meu input é esse:

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

Vi que é possivel através de:

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

Porém vi que só funciona se o valor estiver explicito no atributo "value". O não acontece na maioria das vezes.

Tem algum outro seletor para que eu consiga isso sem ter que setar o atributo value do input?

5
  • Como assim? Vc tem que saber o value para selecionar por ele
    – Lucas
    Commented 6/04/2015 às 13:58
  • Exatamente. No caso a palavra "oi" pra servir de exemplo.
    – Joao Paulo
    Commented 6/04/2015 às 14:06
  • Não entendi isso: "...sem ter que setar o atributo value do input?"
    – Lucas
    Commented 6/04/2015 às 14:27
  • Se um input esta escrito assim: <input type='text' value='blabla' /> eu consigo pegar com o seletor $("input[value='blabla']"), mas se o input esta escrito <input type='text' /> e eu digitar o texto blabla, o seletor $("input[value='blabla']"), não encontra nada. Percebeu a diferença?
    – Joao Paulo
    Commented 6/04/2015 às 14:33
  • @Lucas A questão trata de texto digitado pelo usuário, acredito eu. Commented 6/04/2015 às 14:33

2 Respostas 2

4

Não é possível fazer isso. Os seletores atuam de forma similar ao CSS, sobre elementos e atributos que estiverem na DOM.

Você terá de selecionar os elementos que deseja manualmente, da forma indicada nesta resposta no SOEN:

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

Se quiser alguma facilidade em usar isso, pode até criar um plug-in do jQuery:

$(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>

5
  • 1
    Estava a criar uma resposta, mas vai ficar igual à tua... já anulei, mas porque usas o indexOf() ao invés de $(this).val() === 'oi' ? É que desta forma o valor é exato, ao passo que com indexOf() só precisa conter oi!
    – Zuul
    Commented 6/04/2015 às 14:58
  • A questão está ambígua... na primeira linha o autor disse "que contenha oi", mas depois no exemplo dele usou "#texto[value='oi']". Ai eu fiquei sem saber o que fazer, e resolvi postar a resposta menos obvia... tipo é mais fácil alguém saber que existe == do que indexOf (eu acho). Esse foi o motivo. Commented 6/04/2015 às 15:08
  • Ok! Ok! Estava confuso pelo inverso do motivo pelo qual estavas confuso! :P (e +1 por andares mt rápido a responder e de forma correta)
    – Zuul
    Commented 6/04/2015 às 15:11
  • @Zuul Obrigado pelo feedback! =D Commented 6/04/2015 às 15:19
  • Realmente o modo como escrevi dá a entender que eu queria que dentro do input em qualquer parte do texto eu encontrasse 'oi'. Não era, mas você conseguiu ir além do que eu esperava. +1.
    – Joao Paulo
    Commented 6/04/2015 às 16:04
0

Pode percorrer os input[type="text"] verificando se o value dele é "oi".

$('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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .