如何解决placeholder的兼容性
html 5 有个很棒的属性,placeholder,在鼠标聚焦到上面时候,提示文字会消失,失去焦点之后,又会出现: 但是在不支持html5的低版本的浏览器中,placeholder属性是无效的,为了解决这个问题,因此,人为的去实现placeholder属性: 代码如下: //placeholder功能实现 var placeholder = { add: function (el) { if (!('placeholder' in document.createElement('input'))) { var self = placeholder; el.each(function (e) { if (IsEmpty(e.value()) e.value() == e.attr('placeholder')) { e.value(e.attr('placeholder')); e.css('color', 'gray'); } else { e.css('color', 'black'); } }); el.bind('focus', self._onfocus); el.bind('click', self._onfocus); el.bind('blur', self._onblur); el.bind('keyup', self._onkeyup); } }, remove: function (el) { if (!('placeholder' in document.createElement('input'))) { var self = placeholder; el.unbind('focus', self._onfocus); el.unbind('click', self._onfocus); el.unbind('blur', self._onblur); } }, check: function (el) { if (!('placeholder' in document.createElement('input'))) { el.each(function (tar) { if (IsEmpty(tar.value())) { tar.value(tar.attr('placeholder')); } }); } }, clear: function () { if (!('placeholder' in document.createElement('input'))) { $('input[type="text"]').each(function (el) { if (el.value() == el.attr('placeholder')) { el.value(''); } }); $('textarea').each(function (el) { if (el.value() == el.attr('placeholder')) { el.value(''); } }); } }, _onfocus: function () { if ($(this).value() == $(this).attr('placeholder')) $(this).value(''); }, _onblur: function () { if (IsEmpty($(this).value()) $(this).value() == $(this).attr('placeholder')) { $(this).value($(this).attr('placeholder')); $(this).css('color', 'gray'); } else { $(this).css('color', 'black'); } }, _onkeyup: function () { if (IsEmpty($(this).value())) { $(this).css('color', 'gray'); } else { $(this).css('color', 'black'); } } }; 使用时候: 代码如下: placeholder.add($('input[type="text"]')); placeholder.add($('textarea')); 需要注意的是,考虑到如果input的type是password的时候,placeholder显示的是.....的属性 这种情况下,解决方法为: 给定两个输入框, 一个是text,一个为password的, 在有焦点的时候,切换为password,失去焦点的时候,切换为text用来展示placeholder属性. 代码如下: $(function(){ var pwd = $("#pwd"); var password = $("#password"); pwd.focus(function(){ pwd.hide(); password.show().focus(); }); password.focusout(function(){ if(password.val().trim() === ""){ password.hide(); pwd.show(); } }); });
如何用jQ去写类似密码框placeholder的效果
<&#47;script>$(function(){$("#txtUserName").focus(function(){if($(this).val()==="请输入用户名"){$(this).val("");}}).blur(function(){if($(this).val()===""){$(this).val("请输入用户名");}});});<&#47;script>一点小代码,没有加入样式
如何解决placeholder的兼容性
展开全部 Placeholder在不支持html5的低版本的浏览器中,placeholder属性是无效的,例如ie9及以下的ie浏览器不兼容这个属性。
下面介绍placeholder兼容性的处理在页面添加如下脚本$(function() {// 如果不支持placeholder,用jQuery来完成if(!isSupportPlaceholder()) {// 遍历所有input对象, 除了密码框$('input').not("input[type='password']").each(function() {var self = $(this);var val = self.attr("placeholder");input(self, val);});/**//* 对password框的特殊处理* 1.创建一个text框* 2.获取焦点和失去焦点的时候切换*/$('input[type="password"]').each(function() {var pwdField = $(this);var pwdVal = pwdField.attr('placeholder');var pwdId = pwdField.attr('id');// 重命名该input的id为原id后跟1pwdField.after('');var pwdPlaceholder = $('#' + pwdId + '1');pwdPlaceholder.show();pwdField.hide();pwdPlaceholder.focus(function(){pwdPlaceholder.hide();pwdField.show();pwdField.focus();});pwdField.blur(function(){if(pwdField.val() == '') {pwdPlaceholder.show();pwdField.hide();}});});}});// 判断浏览器是否支持placeholder属性function isSupportPlaceholder() {var input = document.createElement('input');return 'placeholder' in input;}// jQuery替换placeholder的处理function input(obj, val) {var $input = obj;var val = val;$input.attr({value:val});$input.focus(function() {if ($input.val() == val) {$(this).attr({value:""});}}).blur(function() {if ($input.val() == "") {$(this).attr({value:val});}});}
Java将密码框中没输入密码是显示为请输入密码输入密码是显示星号
方法1.对于支持placeholder属性的浏览器。
可以暂且认为除了老版本的IE系列浏览器都支持这个属性。
可以直接在input标签上附加属性,如下:方法2.对于不支持placeholder属性的浏览器,使用一个相对定位的元素,使其偏移,浮在输入框上方。
当用户点击这个偏移元素,或输入框获得焦点时,隐藏这个偏移元素,来模拟placeholder的效果。
有人知道ant
{getFieldDecorator('password')( } type='password' placeholder='123456' /> )}登录记得在自己得项目里面加入:const { getFieldDecorator } = this.props.form还要 组件(需要暴露也就是你引用得组件)= Form.create()(当前组件);
使用bootstrapValidator验证时,提示信息一起出来了
展开全部 BootstrapValidator是基于bootstrap3的jquery表单验证插件,是最适合bootstrap框架的表单验证插件,在工作中用到此框架就写下自己在使用中积累的一些心得当按钮的类型为submit时,使用bootstrapValidator的isValid()能够使验证表单正常工作,但当button的type类型为button时,只调用bootstrapValidator的isValid()方法无法正常工作。
这时候就需要使用bootstrapValidator的validate()方法进行激活。
1、JSP中 * 新增管理员 登录名 用户名 密码 角色 ${role.roleName} 确定 取消
html网页登录时用户信息如何验证
展开全部 我觉得php是最好用的 php版本7.x 开启pdo,嘛~我自己用的,自己理解后修改吧~ 登陆:[login.php] demoa{width:100px;} Login! body{background-repeat:no-repeat;}.head{background-color:rgba(254,224,223,0.5);width:100%;}.getAcc{border:none;margin:100px auto;box-shadow:4px 4px rgba(255,255,255,0.3);width:500px;height:300px;background:white;}.getAcc input{background:none;padding-bottom:0;border-width:0 0 2px;border-color:rgba(254,224,223,1);outline:none;}.getAcc .usr{position:absolute;left:50%;top:230px;}.getAcc .psd{position:absolute;left:50%;top:280px;}.getAcc button{position:absolute;left:55%;top:310px;width:100px;height:33px;background:none;border:none;outline:none;margin: auto 5px auto auto;color:rgb(232,122,144);}.getAcc button:focus{background:rgba(244,167,185,0.5);transition:all 0.5s ease;}.getAcc input:focus{border-color:rgb(232,122,144);transition:all 0.5s ease-in-out;}div#aira img{position:absolute;top:210px;left:40%;width:155px;height:220px;margin:auto 5px auto auto;}.getAcc input{vertical-align:middle;}.getAcc form{margin:10px 10px;}input:-webkit-autofill{background-color:none;}.head a:hover{width:220px;}ul a{width:220px;}query("select username from users where username='$usr';"); $cpwd=$dbh->query("select username from users where username='$usr' and password='$pwd';"); //执行查询语句 $row1=$cusr->fetch(PDO::FETCH_BOTH); //$row1为cusr执行后将返回结果转换成行数组格式 $row2=$cpwd->fetch(PDO::FETCH_BOTH); if(empty($row1[0]))//若为空则表示没有匹配到任何条目 { $dbh=null;//断开数据库 ?> alert ("账号不存在"); alert ("密码/账号错误!"); 注册[register.php] demoRegister16){echo 'alert("The length of the password should between 6 and 26!");';}else{$pwd=$_POST["password"];$sql = "insert into users values ('$urn','$pwd')";$ck_true = $dbh->query('select username from users where username="$urn"');$row_ck1=$ck_true->fetch(PDO::FETCH_BOTH);if(empty($row_ck1[0])){$dbh->exec($sql);$dbh=null;echo 'window.location.href="/login.php";';}else{$dbh=null;echo " alert('ERROR') ";}}}?>
转载请注明出处51数据库 » placeholder password
昨晚床底下真的不是我