input中placeholder属性

简介: input中placeholder属性
  • 注意:IE 9及更早的版本不支持该属性


//列表框输入前默认灰色字体,输内容时字体加黑
<input type="text" name="" id="user_name" placeholder="用户名/学号/手机号">




可以使用js中的焦点事件完成该功能


  • 1.onfocus获得焦点


  • 2.onblur失去焦点


<script>
    var text = document.querySelector('input');//获取元素
    text.onfocus = function () {
        if(this.value === '用户名/学号/手机号'){
            this.value = '';
        }
        this.style.color = '#333';
    }
    text.onblur = function () {
        if(this.value === ''){
            this.value = '用户名/学号/手机号';
        }
        this.style.color = '#999';
    }
</script>
相关文章
|
7月前
|
存储 JavaScript 前端开发
input标签的23种type类型
input标签的23种type类型
305 3
|
7月前
|
JavaScript
placeholder和value的区别
placeholder和value的区别
|
2月前
|
数据安全/隐私保护
Input元素的type属性
【10月更文挑战第4天】Input元素的type属性。
33 6
|
2月前
|
Web App开发 数据可视化 JavaScript
input标签的type属性汇总
input标签的type属性汇总
94 0
|
3月前
|
JavaScript
v-model指令获取常见表单项的内容 input,textarea,radio,checkbox,select
本文介绍了Vue.js中v-model指令的作用和语法,并通过示例代码展示了如何使用v-model来获取不同类型的表单元素(如文本输入框、文本域、复选框、单选框和下拉菜单)的内容。
|
4月前
|
JavaScript 前端开发 数据安全/隐私保护
input的23种属性
input的23种属性
25 1
|
7月前
|
Web App开发 前端开发 iOS开发
input中typedate的属性都有那些
input中typedate的属性都有那些
|
7月前
|
Web App开发 移动开发 iOS开发
input输入框的23中类型
input输入框的23中类型
106 1
|
7月前
|
移动开发 自然语言处理 前端开发
input表单 type属性详解
input 元素可以用来生成一个供用户输入数据的简单文本框。 在默认的情况下, 什么样的数据均可以输入。而通过不同的type属性值,可以限制输入的内容。
139 1
|
数据安全/隐私保护
input表单的23个type属性
input表单的23个type属性
154 0