HTML5 자리표시자 속성에 대한 자세한 소개

자리 표시자(HTML5 자리표시자 속성에 대한 자세한 소개)는 입력 필드의 예상 값에 대한 프롬프트 정보를 제공하는 데 사용되는 HTML5의 새로운 HTML 속성으로, 주류 브라우저에서 널리 지원되었으며 사용이 매우 간단합니다.

<input id="username" name="username" HTML5 자리표시자 속성에 대한 자세한 소개="请输入用户名" type="text">

이 속성은 <textarea></textarea> 여러 줄 텍스트 상자와 속성 값이 text, 비밀번호, 검색, 전화, URL 또는 이메일 등인 type에 적용됩니다. <input>

사용자 정의 스타일

자리 표시자의 기본 렌더링 스타일을 변경하려면

의사 요소 선택기를 사용해야 하지만 현재 브라우저는 지원되지 않으므로 다양한 브라우저의 다양한 구현 방법에 따라 별도로 정의할 수 있습니다. ::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은 중요하지 않습니다). <p></p>Firefox 정의 방식 변경

이전 버전의 Firefox 브라우저와 호환되어야 하는 경우 콜론이 하나만 있는 다음 스타일 규칙도 추가해야 합니다.

:-moz-HTML5 자리표시자 속성에 대한 자세한 소개 { /* Firefox 4 - 18 */
  color: green;}

Firefox 19부터 콜론으로 시작하는 의사 클래스 정의 방법

이 폐기되고 콜론 2개를 사용하는 의사 요소 정의 방법으로 전환되었기 때문입니다. 동시에 필요한 경우 재정의할 수 있는 기본 :-moz-HTML5 자리표시자 속성에 대한 자세한 소개 불투명 스타일도 추가합니다. 그렇지 않으면 텍스트가 반투명합니다. opacity: 0.54

::-moz-HTML5 자리표시자 속성에 대한 자세한 소개 {
  color: green;
  opacity: 1;}

의사 클래스 및 의사 요소

의사 클래스와 의사 요소의 차이점은 무엇입니까? 의사 클래스는 요소에 클래스를 추가하는 것으로 이해될 수 있습니다(예:

의사 클래스, 첫 번째 하위 요소 선택: :first-child

p:first-child {
  font-size: 16px;}

는 요소의 현재 상태로도 이해될 수 있음). 유사한 효과를 얻기 위해 Real 클래스를 추가하여 추가할 수도 있습니다.

p.first-child {
  font-size: 16px;}

Pseudo 클래스이든 실제 클래스이든 스타일은

요소에 직접 추가됩니다. <p></p>

Pseudo 요소는 가상 요소를 추가하는 것으로 이해될 수 있습니다. 예를 들어,

의사 요소는 다음 의사 코드처럼 이해될 수 있습니다. p:before

<before>p:before</before><p>paragraph</p>

여기서

요소와 <p></p>는 두 개의 다른 요소로 이해될 수 있습니다. 혼란스럽더라도 문제가 되지 않습니다. 의사 요소 및 의사 클래스에 대한 자세한 내용은 의사 클래스 - CSS | CSS | MDNp:before

선택기로 인한 문제

IE 브라우저는 자리 표시자의 스타일을 정의하기 위해 의사 클래스

선택기를 사용하기 때문입니다. 다른 텍스트 입력 상자가 있는 경우 선택기 특이성이 더 높은 스타일 규칙이 이 스타일을 재정의합니다. :-ms-input-HTML5 자리표시자 속성에 대한 자세한 소개

input:-ms-input-HTML5 자리표시자 속성에 대한 자세한 소개 { /* 0, 0, 1, 1 */
  color: green;}#username { /* 0, 1, 0, 0 */
  color: blue;}

주석의 숫자는 해당 스타일의 특이성을 나타내는 데 사용됩니다. 선택자. <p></p>위 두 가지 스타일 규칙 중 ID 선택자를 사용하는 것이 더 구체적이므로 IE 10/11에서 테스트할 때 자리 표시자가 파란색으로 표시되는 것을 볼 수 있는데, 이는 예상한 것과 조금 다릅니다. . 의사 클래스 선택기를 사용하는 이전 버전의 Firefox에도 이 문제가 있으므로 스타일을 작성할 때 특히 주의해야 합니다. 사용할 수 있는

규칙이 있다는 점을 잊지 마세요. . 두 개의 콜론이 있는 의사 요소 선택기를 사용하는 다른 브라우저에는 이 문제가 없습니다. 예: !important

input::-webkit-input-HTML5 자리표시자 속성에 대한 자세한 소개 { /* 0, 0, 0, 2 */
  color: green;}#username { /* 0, 1, 0, 0 */
  color: blue;}

위의 두 가지 스타일 규칙은 Chrome을 사용하여 자리 표시자의 색상이 녹색인지 테스트합니다. . <p></p> 선택자의 특수성에 관해서는 내 저서인 CSS 선택자의 특수성과 중요성을 참조하세요. <p></p>동작 일관성 유지

스타일을 맞춤설정할 수 있지만 여전히 동작에는 약간의 차이가 있습니다. Chrome과 Firefox에서는 텍스트 입력 상자에 콘텐츠를 입력할 때만 자리 표시자가 사라집니다. IE에 내용이 입력되면 다시 표시되고, 텍스트 입력 상자에 초점이 맞춰지면 자리 표시자가 사라지고, 내용이 입력되지 않으면 다시 표시됩니다. Chrome 및 Firefox와 같은 브라우저에서 포커스를 받은 후 사라지는 효과를 얻으려면

의사 클래스 선택기를 사용하여 자리 표시자의 텍스트 색상을 투명하게 설정할 수 있습니다. :focus

:focus::-webkit-input-HTML5 자리표시자 속성에 대한 자세한 소개 {
  color: transparent;}

텍스트 입력 상자에 초점이 맞춰집니다. 자리 표시자의 색상을 투명으로 설정하면 사라지는 것처럼 보입니다. <p></p>JavaScript

자리 표시자의 내용을 가져오거나 수정하려면 해당 텍스트 입력 상자의

속성 값을 가져오거나 수정하세요. HTML5 자리표시자 속성에 대한 자세한 소개

$('input').attr('HTML5 자리표시자 속성에 대한 자세한 소개', 'Please enter your name');

그러므로 진정하세요, 엄마는 더 이상 제가 코드를 작성하는 것에 대해 걱정하지 마세요. 하지만, 현재는 스타일 속성을 얻기 위해

메소드를 사용하여 JavaScript를 통해 의사 요소 객체를 직접 조작하는 것은 어려운 것으로 추정됩니다. 요소: window.getComputedStyle()

window.getComputedStyle(document.getElementById('username'),
  '::-moz-HTML5 자리표시자 속성에 대한 자세한 소개').getPropertyValue('color'); // "rgb(0, 255, 0)"

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 = $(&#39;<input>&#39;).attr({
    &#39;type&#39;: &#39;text&#39;,
    &#39;class&#39;: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!