之前做的一个关于送房活动的触屏端的页面,一轮测试下来基本没什么问题,也就过去了。
过了几天,运营拿着手机跑过来说,在输入的时候,联想的结果不对,甚至联想不到相关的楼盘。于是我们又重新测试,并没有她的问题,我跟php就拿 着运营的手机,一边改一边测,从后台来看,输入返回的value值也不对,而且这样的情况比较高发,在我们前端组里进行了讨论,也问了其他前端的朋友,都没遇到过这样的情况,一时卡住了。通过获取输入框内的value值来进行联想,将this.value改 为$(this).val();使用oninput,也尝试了onkeyup。
直到今天早上,才知道,她的iPhone5s安装的是搜狗输入法,并且是搜狗的1.0.3版本,最新版已经是3.2.1,问题解决,呵呵哒...下面贴代码:
<input type="text" οninput="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'); });