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>
相关文章
|
9月前
|
Web App开发 前端开发 iOS开发
input中typedate的属性都有那些
input中typedate的属性都有那些
|
6月前
|
JavaScript 前端开发 数据安全/隐私保护
input的23种属性
input的23种属性
33 1
|
9月前
|
移动开发 自然语言处理 前端开发
input表单 type属性详解
input 元素可以用来生成一个供用户输入数据的简单文本框。 在默认的情况下, 什么样的数据均可以输入。而通过不同的type属性值,可以限制输入的内容。
184 1
|
数据安全/隐私保护
input表单的23个type属性
input表单的23个type属性
249 0
input[type="radio"]自定义样式
input为radio时,虽然会有默认选中的样式,但是并不符合大多数项目的需求,我们的目标是可以随心所欲自定义它的样式。怎么做呢?其实很简单,只要抓住3点。分别是1.label 2.隐藏自带样式 3.绘制我们的样式。
1218 0
深入学习checkbox类型的input元素
先看 一段选中所有页面check类型的代码 $("#SelectBtn").click(function(){var state=$("#SelectAll").attr("checked");if(state != true){ selectAll() $("#SelectAll").
744 0
|
9月前
|
JavaScript
placeholder和value的区别
placeholder和value的区别
|
5月前
|
JavaScript
v-model指令获取常见表单项的内容 input,textarea,radio,checkbox,select
本文介绍了Vue.js中v-model指令的作用和语法,并通过示例代码展示了如何使用v-model来获取不同类型的表单元素(如文本输入框、文本域、复选框、单选框和下拉菜单)的内容。

热门文章

最新文章