javascript - 如果输入框包含一定数量的字符

Question

<input type="text"/> <button>Go</button>

<div id="example">
</div>

如果单击时包含 5 个字符，我怎么能.append“Blah”，#example如果不包含“Other”？inputbutton.append

Answer 1

$('button').click(function() {
    var $example = $('#example');
    if ($('input').val().length == 5) {
        $example.append('Blah');
    } else {
        $example.append('Other');
    }
});

http://jsfiddle.net/zerkms/cks45/

Answer 2

$(function(){
  $('button').click(function(){        
    if($('input').val().length == 5){
      $('#example').append('blah');
    }else{
      $('#example').append('Other');
    }
  }); 
}); 

Answer 3

var example = $('#example');    //get example div
var input = $('input').get(0);  //get first input in the set of inputs

$('button').click(function(){   //bind click handlers to (any) button
   var value = input.value;     //get the (first) input's value
   if(value.length === 5){      //check the value
      example.append('Blah');
   } else {
      example.append('Other');
   }
});

Answer 4

纯JS方式

var butt = document.getElementsByTagName("button")[0],
    input =  document.getElementsByTagName("input")[0],
    example = document.getElementById("example");

butt.onclick = function(){
    if(input.value.length == 5){
        example.textContent += "blah";
    }else{
        example.textContent += "other";
    }
}

​</p>

现场演示 ​</p>

Answer 5

$('button').on('click',function() { 
    $('#example').text(
        $('#example').text() +
        ($('input[type=text]').val().length==5?'Blah':'Other')
    );
} );

Answer 6

如果你不想使用 jquery，你可以这样做......

HTML

<input id="input1" type="text"/> <button onclick="go('input1')">Go</button>

<div id="example">
</div>

JavaScript

function go(inputId){
    document.getElementById("example").innerHTML += document.getElementById(inputId).value.length === 5 ? "bla" : "other";
}

这涉及更改 HTML 以包含输入的 id 和按钮的 onclick 事件处理程序。