<input type="text" class="login-input-1" id="usernamePlaceholder" value="用户名" onfocus="onfocusPlaceholderInput(this, 'username')" style="color: gray;"/>
<input name="username" type="text" class="login-input-1" id="username" onblur="onblurRealValueInput(this, 'usernamePlaceholder')" style="display: none;"/>
<input type="text" class="login-input-1" id="passwordPlaceholder" value="密码" onfocus="onfocusPlaceholderInput(this, 'password')" style="color: gray; "/>
<input name="password" type="password" class="login-input-1" id="password" onblur="onblurRealValueInput(this, 'passwordPlaceholder')" style="display: none;"/>
/**
* 点击placeholder框之后,显示真正的输入框.例如点击密码框的placeholder之后显示密码输入框.
* placeholderElement 被点击的元素
* displayElementIdStr 准备显示的元素的id字符串
*/
function onfocusPlaceholderInput(placeholderElement, displayElementIdStr) {
placeholderElement.style.display = "none";
var v_displayElement = document.getElementById(displayElementIdStr);
v_displayElement.style.display = "block";
v_displayElement.value = "";
v_displayElement.focus();
}
/**
*
* 真正有效值的input框,失去焦点时判断是否显示placeholder
* 当密码框失去焦点时,进行判断如果密码为空则显示密码placeholder框,否则显示密码框。
* realValueElement 失去焦点的元素
* placeholderIdStr 准备显示的placeholder的id字符串
*/
function onblurRealValueInput(realValueElement, placeholderIdStr) {
if ("" == realValueElement.value) {
realValueElement.style.display = "none";
var v_placeholderElement = document.getElementById(placeholderIdStr);
v_placeholderElement.style.display = "block";
}
}
分享到:
相关推荐
IE下实现placeholder效果的jquery插件,同时支持文本和密码输入框,内附demo
原生手写的IEplaceholder.js插件,能够解决在IE9及以下浏览器上placeholder不能显示的bug,使用时只需要引入该IEplaceholder.js插件,然后获取所有的input节点,最后调用函数iePlaceholder(nodes,color)即可,nodes...
这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的。但HTML5给我们提供了新的纯HTML的实现方式,不需要任何的JavaScript,只需要在你的input文本框的标记上添加HTML5规范里新增的placeholder属性,...
本文实例讲述了基于JS实现html中placeholder属性提示文字效果。...www.jb51.net JS实现placeholder属性效果</title> [removed] function bl(){ var a=document.getElementById("inpt"); if(a.
今天分享一段jQuery代码,模拟 placeholder 效果。 Javascript代码: 代码如下: function placeHolder(event){ var self = $(this), selfDataValue = self.attr(“data-value”), selfValue = self.val(); if...
主要介绍了两种方法基于jQuery实现IE浏览器兼容placeholder效果,需要的朋友可以参考下
你以前可能无数次看到这种效果,但那些大部分是用JavaScript里实现的,而现在,HTML5提供了原生支持,而且效果更好! HTML代码复制代码代码如下:<input type=”text” name=”first_name” placeholder=”你的...
如下所示: layer.prompt({title: '修改密码',...以上这篇在layer弹层layer.prompt中,修改placeholder的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
本文实例讲述了微信小程序实现动态设置placeholder提示文字及按钮选中取消状态的方法。分享给大家供大家参考,具体如下: 效果图展示 通过绑定点击事件placeholder方法,获取data-num的值,通过js判断num等于几,...
如何实现跨浏览器的placeholder效果呢? 附件是我写的一个jquery插件,可以实现兼容IE7,IE8及以上浏览器的placeholder效果
以前要实现这效果都是用JavaScript来控制才能实现 , firefox、google chrome等表示对其支持 , 唯独IE存在违和感啊! 例如: <input id=”t1″ type=”text” placeholder=”请输入文字” /> 介绍一个超强的让IE...
<script type="text/javascript"> $(function(){ smsSend.init($('#smsBox'),10,myfunc); /* 或者 smsSend.init($('#smsBox'),30); */ }); function myfunc(){ alert('我是传过去的函数'); } </script>
你以前可能无数次看到这种效果,但那些大部分是用JavaScript里实现的,而现在,HTML5提供了原生支持,而且效果更好! HTML代码 <input type="text" name="first_name" placeholder="你的姓名…" /> 你也看见了...
以前要实现这效果都是用JavaScript来控制才能实现 , firefox、google chrome等表示对其支持 , 唯独IE存在违和感啊! 例如: <input id="t1" type="text" placeholder="请输入文字" /> 介绍一个超强的让IE下...
本文实例为大家分享了小程序实现自定义多层级单选和多选的具体代码,供大家参考,具体内容如下 效果: ps:这儿是用自定义的下拉框,我把它封装成了一个组件 wxml <view class="select-box"> ...
本文实例为大家分享了用Element+vue实现开始与结束时间限制的具体代码,供大家参考,具体内容如下 效果 开始时间"> <el-date-picker v-model="startDate" type="datetime" placeholder="选择日期" format=...
本文实例讲述了微信小程序实现简单input正则表达式验证功能。分享给大家供大家参考,具体如下: 1、效果展示 2、关键代码 index.wxml文件 <input placeholder="输入内容" bindinput="check"></input> ...
本文要实现的效果是在输入框内无文字时,提交button是不能点击状态,在输入文字后会变为可点击状态,效果图如下: 实现方法: <textarea name="" id="" rows="3" class="form-control" ng-model="shyj" ...