input 点击后 placeholder 消失

解决浏览器中点击input输入框时，placeholder的值不消失的方法

版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/lianwenxiu/article/details/87898621 <input type="text" placeholder="请输入" οnfοcus="this.placeholder=''" οnblur="this.placeholder='请输入'"

Hmtl5 <input>中placeholder属性（新属性）

Hmtl5 <input>中placeholder属性(新属性) 一.定义和用法 placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. 注释:placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password. 注意:placeholder 属性是 HTML5 中的新属性. 二.示例代码: <form

css设置input中placeholder字体

设置input中placeholder字体颜色 input::-webkit-input-placeholder {color:@a;} input:-moz-placeholder {color:@a} input:-ms-input-placeholder {color:@a} 设置input中placeholder字体大小 input::-webkit-input-placeholder {font-size: @a} input:-moz-placeholder {font-size:

input 的 placeholder属性在IE8下的兼容处理

placeholder是input标签的新属性,在使用的时候有两个问题: 1.IE8 下不兼容处理思路: 如果浏览器不识别placeholder属性,给input添加类名placeholder,模仿placeholder属性的样式,并给input 的value赋值placeholder属性的值 2. input的type属性是password的情况,用上面的方法处理提示语为密码文处理思路: 新添加一个标签,模仿placeholder属性直接上代码: css部分: .input-item {

css系列：input的placeholder在safari下设置行高失效

在项目中遇到input的placeholder在safari下设置行高失效的问题,问度娘后未得治原因,倒是有解决办法: 方法一:使用padding使提示文字居中,如果font-size:14px,UI高度为40px,我们可以设height:14px,padding:13px 0; 方法二:使用line-height:1px 方法三:使用vertical-align: middle; 实践后问题得以解决,但是其他浏览器下也受到了影响,那么问题来了,我们需要单独针对Safari来写hack即[;li

设置input的placeholder样式

自定义input默认placeholder样式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 input::input-placeholder { color: #fb4747; } input::-webkit-input-placeholder { color: #fb4747; } input:-ms-input-placeholder { color: #fb

修改input属性placeholder的样式

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content="木人子韦一日尘"> <title>

ie8的input的placeholder不显示的解决bug

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery1.10.2.min.js" type="text/javascript" charset="utf-8"></script> <style typ

input的placeholder在ie9下不兼容的结局办法。

/* IE9placeholder支持 */ if(!placeholderSupport()){ // 判断浏览器是否支持 placeholder $('[placeholder]').focus(function() { var input = $(this); if (input.val() == input.attr('placeholder')) { in

input 修改placeholder颜色

一般来说input的placeholder是不能修改的,但是现在浏览器利用伪类实现了对placeholder的修改 input::-webkit-input-placeholder { // cherom color: #cbc8c8; } input:-moz-placeholder { // 火狐 Firefox 4 to 18 color: #cbc8c8; } input::-moz-placeholder { // 火狐 Firefox 19+ color: #cbc8c8; } in

input修改placeholder中颜色和字体大小

input::-webkit-input-placeholder { /* placeholder颜色 */ color: #aab2bd; /* placeholder字体大小 */ font-size: 12px; }

类似于input输入框placeholder的效果，兼容ie8

$(function(){ //判断浏览器是否支持placeholder属性 supportPlaceholder='placeholder'in document.createElement('input'), placeholder=function(input){ var text = input.attr('placeholder'), defaultValue = input.defaultValue; if(!defaultValue){

vue项目input的placeholder根据用户的选择改变

html部分 <el-input :placeholder="holder" v-model="searchKey"> <el-select v-model="searchType" placeholder="保单号" slot="prepend" style="width: 110px;"> <el-option v-for="item in s

在safari下input的placeholder设置行高失效

在项目中遇到input的placeholder在safari下设置行高失效的问题,亲测 input{ width:250px; height:30px; line-height:30px; font-size:14px; padding:0px 0px 0px 30px; [;line-height:1;color:#f00;] } 单独针对Safari来写hack

解决input 中placeholder的那些神坑

**昨天后台小哥哥提到placehold无法显示问题,我这边总结一下,顺便写个小文章分享给大家..** ============================================== 一.解决ie9以下input 无placeholder问题解决方案一:jquery实现当浏览器不支持placeholder属性时,克隆一个和界面相同的input框,将placeholder的值设置为其value值,覆盖在界面input框所在位置,并将界面上的input隐藏掉调用方法: $(#se

改变input的placeholder字体颜色

改变input的placeholder字体颜色,注意哦,只是placeholder的字,用户输入的字不可以 input::-webkit-input-placeholder{ coloc:#000; //当然,其他样式也可以在这里修改 } 若只是移动端这样就可以,如实PC端的话,下面的都要加上 -moz代表firefox浏览器私有属性-ms代表IE浏览器私有属性-webkit代表chrome.safari私有属性-o-代表opera浏览器私有属性

在 input 的 placeholder中使用iconfont

写在前面产品要求放大镜和文字放在一起.用定位,位置不准确,就会导致手机上错位,丑的一批. 进入正题如何在input的 placeholder 中使用图标呢? 以阿里巴巴的矢量图标库为例, 现在有三种引入方式 Unicode . Font class . Symbol(为了多色). 我们现在引入方式是Font class . Symbol两种同时使用,Symbol仅仅是为了多色图标.又啰嗦了,进入正题进入正题. 注意要加图标类名比如 iconfont 1.Unicode方式 1.不要直接赋

兼容IE8 input的placeholder的文字显示

if( !('placeholder' in document.createElement('input')) ){ $('input[placeholder],textarea[placeholder]').each(function(){ var that = $(this), text= that.attr('placeholder'); // console.log(text); if(that.val()===""){ that.val(text).addClass('pla

input的placeholder文字颜色修改

input::-webkit-input-placeholder { color: #D6D0CA !important; /* WebKit browsers / } input:-moz-placeholder { color: #D6D0CA !important; / Mozilla Firefox 4 to 18 / } input::-moz-placeholder { color: #D6D0CA !important; / Mozilla Firefox 19+ / } inpu

【转】移动端input输入placeholder垂直不居中

在移动端编写input输入框时候,为了输入文字与输入框垂直居中,一般情况下,会将input的line-height的高度等于height.但在移动端输入的时候会发现,虽然输入内容确实是垂直居中了,但是光标的位置是靠上的,导致感官上的不美观.于是对input设置的时候,首先确定字体的大小如font-size:16px,其次我们确定设计稿里input的高度,如input高度为40px,那么此时的代码应该是这样的:input{height:16px;line-height:16px;padding:1

input之placeholder与行高的问题。

我们实现一个输入框的视觉的时候为了保持其各种各样的兼容性: 1.鼠标要跟文字一样高度. 2.文字要居中对齐. 3.还要有placeholder 第一个目标,当实现一个高度为40像素的高度输入框时,为了与鼠标对齐,我们会默认输入框的高度与字体高度差不多高度.多了会显得输入光标过高. 第二个目标,文字居中对齐的话我们会设置line-height与输入框高度一致. 所以有了这段 <input type="text" value="ceshigjwkegjwl官网看给我个看过

input 点击后 placeholder 消失

热门专题