项目中用到的input 遇到的问题的归类

时间:2023-03-09 09:17:10
项目中用到的input 遇到的问题的归类

  input 前几天 为了这个词 用在搜索框被我们总监喷,为了加强印象,我把它记录下来

最原始的造型

<input type="text" value="搜索"/>  作成搜索框 比较尴尬,因为鼠标放上去 字居然还在 ,特难受

解决此问题!!!
第一中方法
<input type="text" value="搜索" id="sou"/>

$("#sou").focus(function () {
if ($(this).val() == "请输入关键字")
$(this).val("");
});
$("#sou").blur(function () {
if ($(this).val() == "")
$(this).val("请输入关键字");
});

上面方法是input框 鼠标focus的时候value消失 然而现在很多input框 并不是那样,focus的时候还在 ,只有当输入文字的时候才没了
这时候我们可以考虑使用h5的属性 placeholder 这时候问题来了 使用h5 华丽奔放 杠杆的 可是同样的兼容性也不能小觑
<input type="text" placeholder="搜索" id="test"/>
这里利用原生js进行封装
这是我在曾经访问过一位大神 里面的 我们到时候项目中用到 直接调用就好了 地址:http://www.zhangxinxu.com/study/js/jquery.placeholder.js
$(function() {
$("#test").placeholder();
});
</script>即可