JavaScript基础（14.输入框实例）

来源：互联网发布：知豆郑州总代理编辑：程序博客网时间：2024/06/02 02:14

这里做了一个简单是实例，不过有两种方法，一种写几十行代码，一种只需要一行，不过，各有优缺点吧

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><div style="width: 500px; margin: 0 auto;">    <input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字"/>    <!--上面的是传统方法，下面这个是新方法，只需要一行即可实现上边复杂的操作，不过新方法也有缺点：    1.因为是最新的，老版本浏览器不兼容    2.无法加入搜索提示内容-->    <input type="text" placeholder="请输入关键字"/></div><script>    function Focus(){        var tag = document.getElementById("i1");        var val = tag.value;        if(val=="请输入关键字") {            tag.value = "";        }    }    function Blur(){        var tag = document.getElementById("i1");        var val = tag.value;        if(val=="") {            tag.value = "清输入关键字";        }    }</script></body></html>

打开后是这样：

鼠标点击输出框后自动清空，如果什么都没有输入，鼠标移开的时候又会出现“请输出关键字”：

右边那个框的效果也是一样的。

新的两个事件的效果自行体会即可。

阅读全文

0 0