js实现input文本框点击时文字消失，失去焦点时文字出现

最新推荐文章于 2022-10-22 20:29:55 发布

luanxiyuan

最新推荐文章于 2022-10-22 20:29:55 发布

阅读量1.9k

点赞数 1

分类专栏：经(cǎi)验(kēng)总结文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/luanxiyuan/article/details/84365823

版权

经(cǎi)验(kēng)总结专栏收录该内容

251 篇文章 3 订阅

订阅专栏

本文转载自：http://hi.baidu.com/anyongqiang/item/29c55dd5c32d0b94270ae775

有三种方法来实现，个人首选第三种

一、

<INPUT onblur="if (value ==''){value='输入文字'}" onclick="if(this.value=='输入文字')this.value=''" maxLength=40 size=16 value=输入文字 name=ss_name>

二、

此功能主要是给用户在搜索输入关键字的时候，给用户一个友好的提示。很实用的代码，主要是onclick(点击)和onblur(失去焦点)两个事件.具体代码如下：(注意：js代码要放到页面的最下面)

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
</head>
 
<body> 
<form action="users.asp" method="post" name="so" id="so" style="margin:0 ">
    <input name="values" type="text" id="values" size="15" maxlength="20" value="请输入用户名" style="color:#CCCCCC;">
    <input type="submit" name="Submit2" value="提交">
    <input name="flag" type="hidden" id="flag" value="username">
</form>
</body>
 
</html> 
<script language="JavaScript" type="text/javascript">
    function addListener(element, e, fn) {
        if (element.addEventListener) {
            element.addEventListener(e, fn, false);
        } else {
            element.attachEvent("on" + e, fn);
        }
    }

    var values = document.getElementById("values");

    addListener(values, "click", function () {
        values.value = "";
    })

    addListener(values, "blur", function () {
        if (values.value == '') {
            values.value = "请输入用户名";
        }
    })
</script>

三、

<html>
<head>
    <script type="text/javascript">
        //扩充String方法，使其具有trim()
        String.prototype.trim = function () {
            return this.replace(/(^\s*)|(\s*$)/g, "");
        }

        function onClickt(inputObj) {
            var text = '可消除空格，请输入空格'
            inputObj.value = inputObj.value.trim();
            inputObj.style.color = 'black';
            if (inputObj.value == text) {
                inputObj.value = '';
            }
        }

        //当失去焦点时，调用onBlur()
        function onBlur(inputObj) {
            inputObj.value = inputObj.value.trim();
            if (inputObj.value == '') {
                inputObj.value = '可消除空格，请输入空格';
                inputObj.style.color = 'gray';
            }
        }
    </script>
</head>
<body>
 
<input type="text" size="25"  style="color: gray" value="可消除空格，请输入空格" 
       id="input_search" onclick="onClickt(this);" onblur="onBlur(this);" style="color: gray"/>
 
</body>
</html>

luanxiyuan

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现input文本框点击时文字消失，失去焦点时文字出现

本文转载自：http://hi.baidu.com/anyongqiang/item/29c55dd5c32d0b94270ae775有三种方法来实现，个人首选第三种一、<INPUT onblur="if (value ==''){value='输入文字'}" onclick="if(this.value=='输入文字')this.value=''" maxLength=40 ...
复制链接

扫一扫

专栏目录