【问题标题】:placeholder in input feild in wordpress is not working in mobile devicewordpress 输入字段中的占位符在移动设备中不起作用
【发布时间】:2015-12-28 06:24:14
【问题描述】:

我正在使用 Jupiter 主题在 wordpress 中创建一个网站,但联系人表单中的占位符没有显示在手机中并且在桌面上正常工作。 例如,您的电话号码中的占位符比移动设备中的占位符仅显示您的电话号码,而电话号码未显示。

     .mk-contact-form-wrapper.outline-style.contact-light .mk-textarea::-        
     webkit-input-placeholder,
      .mk-contact-form-wrapper.outline-style.contact-light .text-input::- webkit-input-placeholder {
     color: rgba(255, 255, 255, .7)
      }
      .mk-contact-form-wrapper.outline-style.contact-light .mk-textarea:-     
      ms-input-placeholder,
     .mk-contact-form-wrapper.outline-style.contact-light .text-  input:-   ms-input-placeholder {
      color: rgba(255, 255, 255, .7)
      }
     .mk-contact-form-wrapper.outline-style.contact-light .mk-textarea:-   moz-placeholder,
    .mk-contact-form-wrapper.outline-style.contact-light .text-  input:-    moz-placeholder {
     color: rgba(255, 255, 255, .7)
      }
     .mk-contact-form-wrapper.outline-style.contact-light   .mk-textarea:focus,
     .mk-contact-form-wrapper.outline-style.contact-light .text-  input:focus {
      background-color: rgba(255, 255, 255, .1);
      color: #fff
       }
      .mk-contact-form-wrapper.outline-style.contact-light    .mk-textarea:focus::-webkit-input-placeholder,
      .mk-contact-form-wrapper.outline-style.contact-light .text-          input:focus::-webkit-input-placeholder {
       color: rgba(255, 255, 255, .4)
     }
    .mk-contact-form-wrapper.outline-style.contact-light          .mk-contact-form-wrapper.outline-style.contact-light .text-input:focus:-    ms-input-placeholder {
    color: rgba(255, 255, 255, .4)
    }
   .mk-contact-form-wrapper.outline-style.contact-light       .mk-textarea:focus:-moz-placeholder,
   .mk-contact-form-wrapper.outline-style.contact-light .text-  input:focus:-moz-placeholder {
  color: rgba(255, 255, 255, .4)
  }

这里有php代码

    if($style == 'outline') {
    $output .= $fancy_title;
    $output .= '<div class="mk-contact-form-wrapper mk-shortcode contact- '.$skin.' outline-style '.$el_class.'">';
   $output .= '<form class="mk-contact-form" method="post"  novalidate="novalidate">';
   $output .= '<div class="mk-form-row">';
   $output .= '<input placeholder="'.__( 'Your Name', 'mk_framework'  ).'" type="text" required="required" name="contact_name" class="text-input  '.(($phone == 'true')? 'two-third' : 'half').'" value=""   tabindex="'.$tabindex_1.'" />';
   if($phone == 'true') {
    $output .= '<input placeholder="'.__( 'Your Phone Number',   'mk_framework' ).'" type="text"  name="contact_phone" class="text-input  two-third" value="" tabindex="'.$tabindex_2.'" />';
    }
    $output .= '<input placeholder="'.__( 'Your Email', 'mk_framework'   ).'" type="email" required="required" name="contact_email" class="text-input    '.(($phone == 'true')? 'two-third' : 'half').'"  value="" tabindex="'.$tabindex_3.'" />';
  $output .= '</div>';
  $output .= '<div class="mk-form-row"><textarea required="required"  placeholder="'.__( 'Your message', 'mk_framework' ).'"  name="contact_content" class="mk-textarea" tabindex="'.$tabindex_4.'"> </textarea></div>';
    $output .= '<div class="mk-form-row"><textarea  placeholder="'.__(  'Insert area of your interest', 'mk_framework' ).'" name="contact_content1"   class="mk-textarea custom" tabindex="'.$tabindex_6.'"></textarea></div>';

【问题讨论】:

  • 根据您的代码和提供的屏幕截图,我无能为力。
  • 我们不知道从哪里开始,因为我们没有足够的信息。请添加 URL 或更多详细信息,例如用于联系表格的插件等。

标签: php html css wordpress


【解决方案1】:

placeholder 属性仅支持基于 PC 的浏览器,不适用于移动设备尝试使用另一种技术作为占位符。

【讨论】:

    猜你喜欢
    • 2016-10-17
    • 1970-01-01
    • 2013-06-30
    • 1970-01-01
    • 2018-05-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-04-04
    相关资源
    最近更新 更多