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
placeholder和value的区别
placeholder和value的区别
|
2月前
|
数据安全/隐私保护
Input元素的type属性
【10月更文挑战第4天】Input元素的type属性。
39 6
|
3月前
|
JavaScript
v-model指令获取常见表单项的内容 input,textarea,radio,checkbox,select
本文介绍了Vue.js中v-model指令的作用和语法,并通过示例代码展示了如何使用v-model来获取不同类型的表单元素(如文本输入框、文本域、复选框、单选框和下拉菜单)的内容。
|
4月前
|
JavaScript 前端开发 数据安全/隐私保护
input的23种属性
input的23种属性
29 1
|
7月前
|
Web App开发 前端开发 iOS开发
input中typedate的属性都有那些
input中typedate的属性都有那些
|
7月前
|
Web App开发 移动开发 iOS开发
input输入框的23中类型
input输入框的23中类型
129 1
|
7月前
|
移动开发 自然语言处理 前端开发
input表单 type属性详解
input 元素可以用来生成一个供用户输入数据的简单文本框。 在默认的情况下, 什么样的数据均可以输入。而通过不同的type属性值,可以限制输入的内容。
171 1
|
数据安全/隐私保护
input表单的23个type属性
input表单的23个type属性
195 0
|
前端开发
使用 div 实现 input、textarea 输入框,并支持 placeholder 属性(解决浏览器兼容问题)
使用 div 实现 input、textarea 输入框,并支持 placeholder 属性(解决浏览器兼容问题)
230 0