input框的输入联想引发的问题

之前做的一个关于送房活动的触屏端的页面，一轮测试下来基本没什么问题，也就过去了。

过了几天，运营拿着手机跑过来说，在输入的时候，联想的结果不对，甚至联想不到相关的楼盘。于是我们又重新测试，并没有她的问题，我跟php就拿 着运营的手机，一边改一边测，从后台来看，输入返回的value值也不对，而且这样的情况比较高发，在我们前端组里进行了讨论，也问了其他前端的朋友，都没遇到过这样的情况，一时卡住了。通过获取输入框内的value值来进行联想，将this.value改 为$(this).val();使用oninput，也尝试了onkeyup。

直到今天早上，才知道，她的iPhone5s安装的是搜狗输入法，并且是搜狗的1.0.3版本，最新版已经是3.2.1，问题解决，呵呵哒...下面贴代码：

 

<input type="text" oninput="chose_lp();" value="" id="showname" name="showname" placeholder="请输入楼盘名" class="ipt" />
<input type="hidden" name="lpname" id="lpname" value=""/>
<input type="hidden" name="lpid" id="lpid" value=""/>
<input type="hidden" name="prj_pinyin" id="prj_pinyin" value=""/>

<div class="lianX" style="display:none;"><ul id="show_lp"></ul></div> 

 

function chose_lp(){
  $('#lpname').val('');
  $('#lpid').val('');
  var str=$("#showname").val();
  if(str){
    $('#show_lp').html('');
    var city_str= $("#city").val();
    var submitData = {lpname:str,city:city_str};
    $.post("/taofang/index.php?m=Main&a=search_lp",
    submitData,
    function(data){
      if(data.cord==1){
        $.each( data.mess, function(i, n){
          html+="<li value='"+data.mess[i]['prj_id']+"' data='"+data.mess[i]['prj_pinyin']+"'>"+data.mess[i]['itemname']+"-"+data.mess[i]['channel_name']+"</li>";
        });
      }else{
         html='<li>未找到匹配楼盘</li>';
      }
      $('#show_lp').html(html);
      if(data.cord==1){
        $('#show_lp li').bind('click', function(){
          $('#lpname').val($(this).html());
          $('#lpid').val($(this).attr('value'));
          $('#prj_pinyin').val($(this).attr('data'));
          $('#show_lp li').unbind("click");
          $('#showname').val($(this).html());
          $('.lianX').hide();
        });
      }
      $('.lianX').show();
    },"json");
  }else{
    $('#show_lp').html('<li>请输入楼盘名称</li>');
    $('.lianX').hide();
  }
} 
//部分为php同事编写

 

 

不过顺便让我了解了一下，实时监听输入框值的变化，oninput结合onpropertychange（IE专属），
使用 onkeydown、onkeypress、onkeyup 这个几个键盘事件来监测的话，监听不了右键的复制、剪贴和粘贴这些操作 。

oninput是H5的事件，不支持IE9以下的版本，具体的介绍可以参加http://www.cnblogs.com/lhb25/archive/2012/11/30/oninput-and-onpropertychange-event-for-input.html，学习一下

 

<div class="wrap">
    <textarea></textarea>
    <div class="msg"></div>
</div>

 

$('textarea').bind('input propertychange', function() {
    $('.msg').html($(this).val().length + ' characters');
});