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

最新推荐文章于 2024-03-19 10:28:51 发布

__XYQ

最新推荐文章于 2024-03-19 10:28:51 发布

阅读量1k

点赞数

分类专栏：前端基础知识文章标签： javascript

本文链接：https://blog.csdn.net/qq_41144008/article/details/78805945

版权

前端基础知识专栏收录该内容

41 篇文章 0 订阅

订阅专栏

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

<!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" οnfοcus="Focus();" οnblur="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>

打开后是这样：

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

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

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

__XYQ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础（14.输入框实例）

这里做了一个简单是实例，不过有两种方法，一种写几十行代码，一种只需要一行，不过，各有优缺点吧html>lang="en"> charset="UTF-8"> Titlestyle="width: 500px; margin: 0 auto;"> id="i1" onfocus="Focus();" onblur="Blur();" type="text"
复制链接

扫一扫