要做一个水平 竖直都居中的placeholder，并且过长时有自动换行
1.把外层container的display设为table，里层设为table-cell，并对里层设置vertical-align:middle实现垂直居中。
2.padding和border：
实际所占宽度=width+padding+margin+border
3.border本来设置在外层，但input获取焦点后重设border时不方便。。。于是设到里层
4.对手机去除自带样式可用appearance:none; -webkit-appearance:none;
<!DOCTYPE html><html>
<head><meta charset=utf-8 />
<title>多行+垂直居中placeholder</title>
<style type="text/css">
.container{
display:table;
text-align: center;
font-size: 12px;
padding:4px 0 4px 0;
}
.container * {
height:40px;
width:100px;
display: table-cell;
vertical-align: middle;
}
.placeholderDiv{
color: #6D6D6D;
letter-spacing: 2px;
white-space: pre-wrap;
margin: 0 5px 0 5px;
}
.emailInput{
display: none;
border:solid 1px #E0DEDE;;
text-indent:10px;
}
.borderRdaius {
border-radius: 5px;
box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;
border:1px solid #E0DEDE;
}
.emailInput:focus{
box-shadow:0 0 4px rgba(255,153,164,0.8);
border:solid 1px #B00000;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$().ready(function(){
$(".placeholderDiv").click(function(){
$(this).hide();
$(".emailInput").show();
$(".emailInput").focus();
})
$(".emailInput").blur(function(){
if($(this).val() == ""){
$(".emailInput").hide();
$(".placeholderDiv").show();
}
})
})
</script>
</head>
<body>
<div class="container">
<div class="placeholderDiv borderRdaius">请输入您的电子邮箱</div>
<input class="emailInput borderRdaius"/>
</div>
</body>
</html>
</html>
tbd
input获取焦点后多出了1px的上下边距？
分享到：
相关推荐
### jQuery 解决 Placeholder 不换行、不居中问题详解 #### 一、问题背景与概述 在网页开发中，为了提升用户体验，我们经常会在输入框中使用 `placeholder` 属性来提示用户应该输入什么类型的信息。然而，在某些...
@interface UITextView (Placeholder) /* 占位文字 */ @property (nonatomic, copy) NSString *placeholder; /* 占位文字颜色 */ @property (nonatomic, strong) UIColor *placeholderColor; @end
为了提升用户体验，我们常常需要对文本框进行定制化处理，使其具备特定的功能，如内容自动垂直居中、默认提示文字显示灰色以及单击后清空提示文字。下面将详细解释如何实现这些功能。 首先，内容自动垂直居中的实现...
在iOS开发中，`UITextView` 是一个常用的控件，用于显示多行可编辑的文本。然而，原生的`UITextView`并没有提供占位符（placeholder）功能，就像`UITextField`那样。开发者通常需要自己实现这个功能，这可能涉及到...
在标题和描述中提到的方法，就是通过设置CSS的`vertical-align`属性来实现这些元素的垂直居中。 `vertical-align`属性是CSS中用于控制内联元素（inline-level elements）或表格单元格（table-cell elements）中内容...
在iOS开发中，`UITextView` 是一个常用的组件，用于显示多行文本输入或阅读。在许多场景下，我们希望给 `UITextView` 添加类似 `UITextField` 的占位符（placeholder）功能，来提示用户输入内容。标题 "UITextView...
在iOS开发中，`TextView` 是一个非常重要的控件，用户可以在此输入和编辑多行文本。`placeholder` 属性通常用于提供一个提示性的说明，就像`UITextField`中的占位符一样，但在默认情况下，`UITextView`并不直接支持...
在iOS开发中，`TextView` 是一个常用的组件，用于接收用户输入的多行文本。`placeholder` 是一种提示用户输入的工具，常见于输入框。然而，原生的`UITextView`并不支持直接设置`placeholder`，因此我们需要通过...
在iOS开发中，`UILabel`通常用于展示静态文本，而`UITextView`则用于实现多行文本输入。然而，原生的`UITextView`并没有提供像`UITextField`那样的`placeholder`属性，即提示性文字，这在需要向用户提示输入信息的...
3. **选择元素**：找到所有带有`placeholder`属性的输入元素，例如`$('input[placeholder], textarea[placeholder]')`。 4. **模拟placeholder效果**：创建一个函数，当输入框获得焦点时清除提示文本，失去焦点时若...
$('input[placeholder], textarea[placeholder]').placeholder(); }); ``` 这段代码会在文档加载完成后，找到所有带有`placeholder`属性的`input`和`textarea`元素，并为它们添加模拟的`placeholder`效果。 在...
简洁的placeholder插件，支持ie9、ie8及以下版本。完美解决ie9中onpropertychange问题。使用简单，引入placeholder.js即可让您的ie完美支持placeholder
默认情况下，`placeholder`的文本是单行显示的，但我们可以利用CSS来实现多行`placeholder`效果。 在Vue.js项目中，由于`el-input`组件的封装，我们不能直接通过内联样式来修改其内部`textarea`的`placeholder`样式...
在ASP.NET中，`PlaceHolder`控件是一个非常重要的组件，它主要被用作容器，用于组织和管理页面上的其他控件。`PlaceHolder`不显示任何特定的用户界面，它的主要功能是提供一个区域，我们可以在这个区域内动态添加或...
本次探讨的主题“列表字段定义多行”主要聚焦于如何在网页表单中创建多行的列表输入项，并且通过具体的代码示例进行深入分析。 ### 一、列表字段的基本概念 列表字段通常指的是在网页表单中用于收集用户输入的一...
ie9浏览器上不支持placeholder属性，所以必须借助插件来实现placeholder，而jquery.placeholder.js则可以实现
此外，你还可以使用现有的前端库和插件，如jQuery Placeholder或Modernizr，它们提供了更完善的跨浏览器解决方案，可以自动检测浏览器对`placeholder`的支持情况，并提供相应的polyfill。 总之，为确保登录表单的`...
文件名"placeholder"可能指的是一个这样的JS插件，它的作用是为IE浏览器提供`placeholder`的支持。 在编写这样的兼容性插件时，开发者需要考虑以下几点： 1. **检测浏览器兼容性**：首先，插件需要检测当前用户...