JS动态修改某个input标签的placeholder中的文字内容和颜色

最新推荐文章于 2024-05-20 20:45:15 发布

IT_小赵

最新推荐文章于 2024-05-20 20:45:15 发布

阅读量2.2w

点赞数 6

分类专栏： JS 文章标签： JS input placeholder

本文链接：https://blog.csdn.net/IT_ZZQ/article/details/93983449

版权

JS 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

今天遇到一个这样的简单需求，整理如下：

1. 刚加载页面的时候，给一个input标签默认灰色的placeholder提示：

2. 用户点击输入框的时候，更改placeholder文字内容，并且颜色改为红色：

3. 当输入框失去焦点时，如果没有输入任何文字，恢复原本的灰色提示状态

下面简单介绍一下我的写法，仅供参考，如有错误，欢迎留言批评指正：

1. 首先html内容如下：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS动态修改input的placeholder文字内容和颜色</title>
<style type="text/css">
/*默认的placeholder文字颜色*/
::-webkit-input-placeholder {
color: #808080;
}

/*需要变化的placeholder文字颜色*/
#myInput.change::-webkit-input-placeholder {
color: red;
}
</style>
</head>
<body>
用户名：<input id="myInput" name="textfield" type="text" class="form-control" placeholder="禁用状态，点击输入用户名" />
</body>
</html>

2.引入jquery文件(路径对照自己的修改)，写JS代码：

3.注意事项：

设置input的placeholder文字内容和颜色一定要分成两条语句执行，这样写是错误的，不能正常执行：

this.setAttribute("placeholder", "请输入用户名").setAttribute('class', 'form-control change'); //错误写法

感谢您的阅读^ - ^

IT_小赵

关注

6
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
JS动态修改某个input标签的placeholder中的文字内容和颜色

今天遇到一个这样的简单需求，整理如下：1. 刚加载页面的时候，给一个input标签默认灰色的placeholder提示：2. 用户点击输入框的时候，更改placeholder文字内容，并且颜色改为红色：3. 当输入框失去焦点时，如果没有输入任何文字，恢复原本的灰色提示状态下面简单介绍一下我的写法，仅供参考，如有错误，欢迎留言批评指正：1. 首先html内容如下：...
复制链接

扫一扫