ホームページ > 記事 > ウェブフロントエンド > HTML5 プレースホルダー属性の詳細な紹介
HTML5 プレースホルダー属性の詳細な紹介
- 黄舟オリジナル
- 2018-05-30 09:51:305478ブラウズ
Placeholder (プレースホルダー) は HTML5 の新しい HTML 属性で、入力フィールドの期待値に関するプロンプト情報を提供するために使用されます。これは主流のブラウザーで広くサポートされており、使用方法は非常に簡単です:
<input id="username" name="username" HTML5 プレースホルダー属性の詳細な紹介="请输入用户名" type="text">
この属性は次のとおりです。 <textarea></textarea> 複数行のテキスト ボックスと、属性値が text、password、search、tel、url、または email などである <input> に適しています。 > <textarea></textarea> 多行文本框和 type 属性值为 text, password, search, tel, url 或者 email 等的 <input>。
自定义样式
如果想改变 HTML5 プレースホルダー属性の詳細な紹介 的默认呈现样式，应该使用 ::HTML5 プレースホルダー属性の詳細な紹介 伪元素选择器，不过当前还没有浏览器支持，因此只能根据不同浏览器的不同实现方式分别定义：
::-webkit-input-HTML5 プレースホルダー属性の詳細な紹介 { /* Chrome/Safari/Opera */
color: green;}::-moz-HTML5 プレースホルダー属性の詳細な紹介 { /* Firefox 19+ */
color: green;}:-ms-input-HTML5 プレースホルダー属性の詳細な紹介 { /* IE 10+ 注意这里只有一个冒号 */
color: green;}为什么样式要分别定义呢，如果像下面这样组合到一起：
::-webkit-input-HTML5 プレースホルダー属性の詳細な紹介,::-moz-HTML5 プレースホルダー属性の詳細な紹介 {
color: green;}不应该把针对不同浏览器的选择器写在一起，这样写会因为无法识别的选择器而造成这整个规则集被忽略(当然，像类似 IE 7 这种具有超强错误处理能力的浏览器除外，不过这里和 IE 7 没什么关系)。
Firefox 定义方式的改变
如果需要兼容老版本的 Firefox 浏览器，还需要添加下面这种只有一个冒号的样式规则：
:-moz-HTML5 プレースホルダー属性の詳細な紹介 { /* Firefox 4 - 18 */
color: green;}因为从 Firefox 19 开始一个冒号的伪类定义方式 :-moz-HTML5 プレースホルダー属性の詳細な紹介 被废弃了，切换为两个冒号的伪元素定义方式。与此同时，它还添加了一个默认的 opacity: 0.54 不透明度样式，如果需要，可以覆盖掉该样式，否则文字是半透明的：
::-moz-HTML5 プレースホルダー属性の詳細な紹介 {
color: green;
opacity: 1;}伪类和伪元素
伪类和伪元素有什么区别呢？伪类可以理解为给某个元素添加了一个类，比如 :first-child 伪类，选择第一个子元素：
p:first-child {
font-size: 16px;}也可以理解为元素当前的状态，同样也可以通过添加一个真正的 class 来实现类似效果：
p.first-child {
font-size: 16px;}无论是伪类还是真正的类，样式都是直接添加到 <p></p> 元素上的。
而伪元素可以理解为添加了一个虚拟的元素。比如 p:before 伪元素，可以像下面这个伪代码这样理解：
<before>p:before</before><p>paragraph</p>
这里 <p></p> 元素和 p:before 可以理解为是两个不同的元素。如果被绕晕了，没关系，毕竟这不是本文的重点，更多伪元素与伪类的信息可以参考 Pseudo-classes - CSS | MDN 和 Pseudo-elements - CSS | MDN
关于伪类选择器引发的问题
因为 IE 浏览器使用的是伪类 :-ms-input-HTML5 プレースホルダー属性の詳細な紹介 选择器来定义 HTML5 プレースホルダー属性の詳細な紹介 的样式，实际上样式是作用于文本输入框的，如果另外还有针对文本输入框的选择器特殊性更高的样式规则，将会覆盖掉该样式，参考下面代码：
input:-ms-input-HTML5 プレースホルダー属性の詳細な紹介 { /* 0, 0, 1, 1 */
color: green;}#username { /* 0, 1, 0, 0 */
color: blue;}注释中的数字用来表示该选择器的特殊性。
上面两个样式规则当中使用 ID 选择器的特殊性更高，所以在 IE 10/11 中测试会看到 HTML5 プレースホルダー属性の詳細な紹介 显示为蓝色，与期望的有点不一样。同样使用伪类选择器的旧版本 Firefox 也会出现这个问题，因此，在书写样式的时候需要特别注意，实在搞不定，别忘了还有 !important 规则可以用。其它使用两个冒号的伪元素选择器的浏览器不会出现这个问题，例如：
input::-webkit-input-HTML5 プレースホルダー属性の詳細な紹介 { /* 0, 0, 0, 2 */
color: green;}#username { /* 0, 1, 0, 0 */
color: blue;}上面两个样式规则互相之间不会影响，使用 Chrome 测试 HTML5 プレースホルダー属性の詳細な紹介 的颜色为绿色。
关于选择器的特殊性可以参考拙作CSS选择器特殊性与重要性。
让行为保持一致
虽然样式是可以自定义了，不过在行为上还有些差异，在 Chrome 和 Firefox 中当文本输入框输入内容时 HTML5 プレースホルダー属性の詳細な紹介 才会消失，清除内容时又会显示出来；而在 IE 中则是当文本输入框获取焦点时 HTML5 プレースホルダー属性の詳細な紹介 就消失了，失去焦点同时没有输入内容时才会重新显示。如果希望在 Chrome 和 Firefox 等浏览器中实现获取焦点就消失的效果，可以借助 :focus 伪类选择器来将 HTML5 プレースホルダー属性の詳細な紹介 的文本颜色设置为透明：
:focus::-webkit-input-HTML5 プレースホルダー属性の詳細な紹介 {
color: transparent;}当文本输入框获取焦点时，HTML5 プレースホルダー属性の詳細な紹介 的颜色被设置为透明，感官上就好像消失一样。
JavaScript
获取或者修改 HTML5 プレースホルダー属性の詳細な紹介 的内容直接获取或者修改对应文本输入框的 HTML5 プレースホルダー属性の詳細な紹介 属性的值就行了：
$('input').attr('HTML5 プレースホルダー属性の詳細な紹介', 'Please enter your name');
So easy，妈妈再也不用担心我写代码了。不过，想要像普通 DOM 元素那样通过 javaScript 获取伪元素对象直接操作估计很难，目前可以使用 window.getComputedStyle()
<p></p>
カスタム スタイル
プレースホルダーのデフォルトのレンダリング スタイルを変更したい場合は、::HTML5 プレースホルダー属性の詳細な紹介 疑似要素セレクターを使用する必要があります。ただし、現在ブラウザーはサポートされていないため、次に従って個別に定義することしかできません。異なるブラウザの異なる実装方法: 🎜window.getComputedStyle(document.getElementById('username'), '::-moz-HTML5 プレースホルダー属性の詳細な紹介').getPropertyValue('color'); // "rgb(0, 255, 0)"🎜 スタイルを別々に定義する必要があるのはなぜですか? スタイルを次のように組み合わせる場合: 🎜
.style-1::-moz-HTML5 プレースホルダー属性の詳細な紹介 {
color: green;}.style-2::-moz-HTML5 プレースホルダー属性の詳細な紹介 {
color: red;}🎜 異なるブラウザのセレクターを一緒に記述すべきではありません。これにより、ルール セット全体が認識できなくなります。無視されます (もちろん、スーパー エラー処理機能を備えた IE 7 のようなブラウザは除きますが、これは IE 7 とは関係ありません)。 🎜Firefox 定義メソッドの変更
🎜 古いバージョンの Firefox ブラウザと互換性を持たせる必要がある場合は、コロンを 1 つだけ含む次のスタイル ルールも追加する必要があります: 🎜$('input').addClass('style-2').removeClass('style-1');🎜Firefox 19 以降では、コロン疑似クラスがあります。定義メソッド
:-moz-HTML5 プレースホルダー属性の詳細な紹介 は非推奨となり、2 つのコロンの疑似要素定義メソッドに切り替えられます。同時に、デフォルトの opacity: 0.54 不透明度スタイルも追加されます。これは必要に応じてオーバーライドできます。それ以外の場合、テキストは半透明になります: 🎜if (!Modernizr.input.HTML5 プレースホルダー属性の詳細な紹介) {
// 做点什么事}pseudo-class および pseudo-class要素
🎜疑似クラスと疑似要素の違いは何ですか?疑似クラスは、:first-child 疑似クラスなどの要素にクラスを追加し、最初の子要素を選択するものとして理解できます。 🎜'HTML5 プレースホルダー属性の詳細な紹介' in document.createElement('input')🎜 は、の現在の状態としても理解できます。同様の効果は、実際のクラスを追加することで実現できます: 🎜
'HTML5 プレースホルダー属性の詳細な紹介' in document.createElement('textarea')🎜 疑似クラスであっても実際のクラスであっても、スタイルは
<p></p> 要素に直接追加されます。 。 🎜🎜擬似要素は、仮想要素を追加するものとして理解できます。たとえば、p:before 擬似要素は次の擬似コードのように理解できます: 🎜({}).toString.call(window.operamini) === '[object OperaMini]'🎜<p></p> 要素と p:before は次のとおりです。 これは 2 つの異なる要素として理解できます。混乱している場合でも、それは問題ではありません。結局のところ、これはこの記事の焦点ではありません。疑似要素と疑似クラスの詳細については、「疑似クラス - MDN と疑似要素 -」を参照してください。 CSS | MDN🎜疑似クラス セレクターについて 発生する問題
🎜 IE ブラウザはプレースホルダーのスタイルを定義するために疑似クラス:-ms-input-HTML5 プレースホルダー属性の詳細な紹介 セレクターを使用するため実際、スタイルはテキスト入力ボックスに適用されます。テキスト入力ボックスのセレクターに対してより高い特異性を持つ他のスタイル ルールがある場合、このスタイルは上書きされます。コメント内の は、セレクターの特異性を示すために使用されます。 🎜🎜上記 2 つのスタイル ルールのうち、ID セレクターを使用する方がより具体的であるため、IE 10/11 でテストすると、プレースホルダーが青色で表示され、予想とは少し異なることがわかります。この問題は、疑似クラス セレクターを使用する Firefox の古いバージョンでも発生するため、スタイルを記述するときに特に注意する必要があります。! important があることを忘れないでください。 code> 使用できるルール。 2 つのコロンを含む疑似要素セレクターを使用する他のブラウザーでは、この問題は発生しません。例: 🎜<pre class="brush:html;toolbar:false;">if (!(&#39;HTML5 プレースホルダー属性の詳細な紹介&#39; in document.createElement(&#39;input&#39;)) || ({}).toString.call(window.operamini) === &#39;[object OperaMini]&#39;) {
// 做点什么事}</pre>🎜 上記の 2 つのスタイル ルールは、相互に影響しません。Chrome を使用して、プレースホルダーの色が緑色であることをテストします。 🎜🎜セレクターの特殊性については、私の著作「CSS セレクターの特殊性と重要性」を参照してください。 🎜<h3>動作の一貫性を保つ</h3>🎜 スタイルはカスタマイズできますが、Chrome と Firefox ではまだ動作にいくつかの違いがあり、テキスト入力ボックスにコンテンツが入力された場合にのみプレースホルダーが消えます。コンテンツがクリアされると表示されます。IE では、テキスト入力ボックスがフォーカスを取得するとプレースホルダーが消え、フォーカスを失ってコンテンツが入力されないと再表示されます。 Chrome や Firefox などのブラウザでフォーカスを取得した後に消える効果を実現したい場合は、 <code>:focus 擬似クラス セレクターを使用して、プレースホルダーのテキストの色を透明に設定できます: 🎜// 做点什么事$('input[HTML5 プレースホルダー属性の詳細な紹介]').on('focus', function() {
var $this = $(this);
if (this.value === $this.attr('HTML5 プレースホルダー属性の詳細な紹介') && $this.hasClass('HTML5 プレースホルダー属性の詳細な紹介')) {
this.value = '';
$this.removeClass('HTML5 プレースホルダー属性の詳細な紹介');
}}).on('blur', function() {
var $this = $(this);
if (this.value === '') {
$this.addClass('HTML5 プレースホルダー属性の詳細な紹介');
this.value = $this.attr('HTML5 プレースホルダー属性の詳細な紹介');
}}); 🎜テキスト入力ボックスにフォーカスが当たると、プレースホルダーの色が透明に設定され、視覚的に消えます。 🎜JavaScript
🎜 プレースホルダーのコンテンツを取得または変更するには、対応するテキスト入力ボックスのHTML5 プレースホルダー属性の詳細な紹介 属性の値を直接取得または変更するだけです: 🎜$('input[HTML5 プレースホルダー属性の詳細な紹介]').on('blur', function() {
var $this = $(this);
var $replacement;
if (this.value === '') { // 失去焦点时值为空则显示 HTML5 プレースホルダー属性の詳細な紹介
if (this.type === 'password') {
$replacement = $this.clone().attr('type', 'text');
$replacement.data('HTML5 プレースホルダー属性の詳細な紹介-password', $this);
// 替代显示的文本输入框获取焦点时将它删掉，并且重新显示原来的密码输入框
$replacement.on('focus', function() {
$(this).data('HTML5 プレースホルダー属性の詳細な紹介-password').show().focus();
$(this).remove();
});
$this.after($replacement).hide();
$this = $replacement;
}
$this.addClass('HTML5 プレースホルダー属性の詳細な紹介');
$this[0].value = $this.attr('HTML5 プレースホルダー属性の詳細な紹介');
}});🎜とても簡単です、お母さんはもう私がコードを書いたことを心配する必要はありません。ただし、通常の DOM 要素のように JavaScript から直接疑似要素オブジェクトを取得することは困難であると推定されており、現時点では window.getComputedStyle() メソッドを使用してそのスタイル属性を取得できます。このメソッドの 2 番目のパラメータは疑似要素です: 🎜try {
$replacement = $this.clone().prop('type', 'text'); // 使用 .prop() 方法在 IE 8 下会报错} catch(e) {
$replacement = $('<input>').attr({
'type': 'text',
'class': this.className // 还可以赋予 id, name 等属性
});}🎜 JavaScript を通じてプレースホルダー疑似要素のスタイルを変更したい場合、より良い方法は、いくつかの異なるスタイルを事前定義することです: 🎜.style-1::-moz-HTML5 プレースホルダー属性の詳細な紹介 {
color: green;}.style-2::-moz-HTML5 プレースホルダー属性の詳細な紹介 {
color: red;}然后通过切换文本输入框的 class 属性来实现修改样式的目的：
$('input').addClass('style-2').removeClass('style-1');
另外也可以通过直接添加样式规则来实现。
Polyfill
对于不支持该属性的浏览器，会简单地忽略掉。原则上，HTML5 プレースホルダー属性の詳細な紹介 仅仅是用来对期望的输入起个提示的作用，对于不支持的浏览器在可用性上不受任何影响。如果需要兼容，那么应该使用特性检测的方式，针对不支持的浏览器使用 Polyfill，对于支持的浏览器来说，原生的当然是最好。
判断浏览器是否支持 <input> 元素的 HTML5 プレースホルダー属性の詳細な紹介 属性，可以引入 Modernizr 库来判断：
if (!Modernizr.input.HTML5 プレースホルダー属性の詳細な紹介) {
// 做点什么事}也可以自己写判断，简单易行的办法就是生成一个 <input> 元素对象，并判断该元素对象是否具有 HTML5 プレースホルダー属性の詳細な紹介 属性：
'HTML5 プレースホルダー属性の詳細な紹介' in document.createElement('input')
同理，对于 <textarea></textarea> 元素也是一样：
'HTML5 プレースホルダー属性の詳細な紹介' in document.createElement('textarea')
另外，Opera Mini 明明不支持 HTML5 プレースホルダー属性の詳細な紹介 属性，却装成自己很懂的样子。这时候可以使用客户端检测技术来将之排除掉，Opera Mini 的 window 对象包含一个 operamini 对象：
({}).toString.call(window.operamini) === '[object OperaMini]'结合起来就是这样：
if (!('HTML5 プレースホルダー属性の詳細な紹介' in document.createElement('input')) || ({}).toString.call(window.operamini) === '[object OperaMini]') {
// 做点什么事}在编写 Polyfill 的时候应该尽量与原生功能保持一致，我这里选择向 IE 的方式看齐，即当文本输入框获取或失去焦点的时候处理 HTML5 プレースホルダー属性の詳細な紹介 是否显示，将文本输入框的 value 值设置为 HTML5 プレースホルダー属性の詳細な紹介 的值来模拟显示 HTML5 プレースホルダー属性の詳細な紹介 的状态。再添加上事件处理程序，当文本输入框获取焦点时如果 value 的值为 HTML5 プレースホルダー属性の詳細な紹介 则清空文本输入框；当文本输入框失去焦点时如果 value 值为空则将 HTML5 プレースホルダー属性の詳細な紹介 的内容赋给它，同时当 HTML5 プレースホルダー属性の詳細な紹介 显示的时候应该给文本输入框添加一个 class="HTML5 プレースホルダー属性の詳細な紹介" 用来设置样式以区别是显示的 HTML5 プレースホルダー属性の詳細な紹介 和还是显示的普通 value：
// 做点什么事$('input[HTML5 プレースホルダー属性の詳細な紹介]').on('focus', function() {
var $this = $(this);
if (this.value === $this.attr('HTML5 プレースホルダー属性の詳細な紹介') && $this.hasClass('HTML5 プレースホルダー属性の詳細な紹介')) {
this.value = '';
$this.removeClass('HTML5 プレースホルダー属性の詳細な紹介');
}}).on('blur', function() {
var $this = $(this);
if (this.value === '') {
$this.addClass('HTML5 プレースホルダー属性の詳細な紹介');
this.value = $this.attr('HTML5 プレースホルダー属性の詳細な紹介');
}});这只是一个简单的模拟实现，实际上还有很多需要处理的情况。
处理密码输入框
如果需要处理 HTML5 プレースホルダー属性の詳細な紹介 的是个密码输入框，它的 value 值会显示为圆点之类的字符，呈现几个莫名其妙的圆点来作为 HTML5 プレースホルダー属性の詳細な紹介 提示恐怕不妥，因此需要特殊对待一下，将密码输入框拷贝一份出来然后修改其 type 属性为 'text' 来替代显示 HTML5 プレースホルダー属性の詳細な紹介，并把原本的密码输入框隐藏：
$('input[HTML5 プレースホルダー属性の詳細な紹介]').on('blur', function() {
var $this = $(this);
var $replacement;
if (this.value === '') { // 失去焦点时值为空则显示 HTML5 プレースホルダー属性の詳細な紹介
if (this.type === 'password') {
$replacement = $this.clone().attr('type', 'text');
$replacement.data('HTML5 プレースホルダー属性の詳細な紹介-password', $this);
// 替代显示的文本输入框获取焦点时将它删掉，并且重新显示原来的密码输入框
$replacement.on('focus', function() {
$(this).data('HTML5 プレースホルダー属性の詳細な紹介-password').show().focus();
$(this).remove();
});
$this.after($replacement).hide();
$this = $replacement;
}
$this.addClass('HTML5 プレースホルダー属性の詳細な紹介');
$this[0].value = $this.attr('HTML5 プレースホルダー属性の詳細な紹介');
}});对于 IE 8 来说它不支持修改 input 元素的 type 属性，使用 jQuery 的 .attr() 方法来修改的话只会默默地失败。此时，可以新建一个文本输入框，然后把密码输入框上的属性赋给这个新建的文本输入框：
try {
$replacement = $this.clone().prop('type', 'text'); // 使用 .prop() 方法在 IE 8 下会报错} catch(e) {
$replacement = $('<input>').attr({
'type': 'text',
'class': this.className // 还可以赋予 id, name 等属性
});}需要注意的是 id 和 name 属性不要重复了，可以先用一个变量保存下来，再用 .removeAttr() 方法来删除属性。
处理表单提交
当表单提交的时候应该将那些正在显示 HTML5 プレースホルダー属性の詳細な紹介 的文本输入框过滤掉，毕竟没有必要将那些没有用的数据提交给服务器，在提交时候将那些文本输入框的 value 值设为空，提交之后再恢复成显示 HTML5 プレースホルダー属性の詳細な紹介 的状态：
$(document).on('submit', 'form', function() {
var $input = $('.HTML5 プレースホルダー属性の詳細な紹介', this);
$input.each(function() {
this.value = '';
});
setTimeout(function() {
$input.each(function() {
this.value = $(this).attr('HTML5 プレースホルダー属性の詳細な紹介');
});
}, 10);});离开页面时
当用户离开页面时也需要清空正在显示 HTML5 プレースホルダー属性の詳細な紹介 的文本输入框，防止浏览器记住文本输入框当前的值，这里可以给 window 对象绑定一个 beforeunload 事件来处理：
$(window).on('beforeunload', function() {
$('.HTML5 プレースホルダー属性の詳細な紹介').each(function() {
this.value = '';
});});另外还需要考虑的问题：
使用代码给一个文本输入框赋值时，应该同时处理 HTML5 プレースホルダー属性の詳細な紹介 的状态。
使用代码获取一个正在显示 HTML5 プレースホルダー属性の詳細な紹介 的文本输入框的值的时候应该得到的是一个空字符串。
如此多的问题也就是说无论 Polyfill 写到如何极致，都很难与原生的功能相提并论，因此推荐的方式使用特性检测技术仅针对不支持的浏览器做 Polyfill，而 Polyfill 的功能应尽可能地向原生功能看齐。
总结
将所有样式总结起来：
input::-webkit-input-HTML5 プレースホルダー属性の詳細な紹介,
textarea::-webkit-input-HTML5 プレースホルダー属性の詳細な紹介 {
color: #999;}input::-moz-HTML5 プレースホルダー属性の詳細な紹介,
textarea::-moz-HTML5 プレースホルダー属性の詳細な紹介 {
color: #999;
opacity: 1;}input:-ms-input-HTML5 プレースホルダー属性の詳細な紹介,
textarea:-ms-input-HTML5 プレースホルダー属性の詳細な紹介 {
color: #999;}.HTML5 プレースホルダー属性の詳細な紹介 {
color: #999;}input:focus::-webkit-input-HTML5 プレースホルダー属性の詳細な紹介,
textarea:focus::-webkit-input-HTML5 プレースホルダー属性の詳細な紹介 {
color: transparent;}input:focus::-moz-HTML5 プレースホルダー属性の詳細な紹介,
textarea:focus::-moz-HTML5 プレースホルダー属性の詳細な紹介 {
color: transparent;}Polyfill 可以直接使用这个 jQuery 插件 mathiasbynens/jquery-HTML5 プレースホルダー属性の詳細な紹介，已经相当完善了。
以上がHTML5 プレースホルダー属性の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。