如何添加自定义属性？

Posted

技术标签:

【中文标题】如何添加自定义属性？【英文标题】：How to add a custom attribute? 【发布时间】：2018-02-26 16:43:45 【问题描述】：

如何在Contact Form 7字段中添加自定义属性无需javascript？

比如页面上有这样一个字段：

<input type="text" name="name" class="form-control" id="name-1" data-attr="custom" data-msg="Текст 1">

问题：是否可以在管理面板中设置这些字段的自定义属性（data-attr、data-msg）？

【问题讨论】：

admin 中没有添加自定义属性的选项。您需要使用 js 或任何自定义代码来完成。 contactform7.com/text-fields 【参考方案1】：

找到你的领域的名称。

[text* text-21]

如果您的字段名称为 name="text-21"，就像我的示例一样，请将此代码添加到 functions.php 文件中。

add_filter( 'wpcf7_form_elements', 'imp_wpcf7_form_elements' );
function imp_wpcf7_form_elements( $content ) 
    $str_pos = strpos( $content, 'name="text-21"' );
    if ( $str_pos !== false ) 
        $content = substr_replace( $content, ' data-attr="custom" data-msg="Foo Bar 1" ', $str_pos, 0 );
    
    return $content;

注意，它会将这些属性添加到名称为 text-21 的所有表单元素中，如果您想阻止它，请为您的表单元素指定一个唯一名称 [text* unique-name]

并将代码更改为

add_filter( 'wpcf7_form_elements', 'imp_wpcf7_form_elements' );
function imp_wpcf7_form_elements( $content ) 
    $str_pos = strpos( $content, 'name="unique-name"' );
    if ( $str_pos !== false ) 
        $content = substr_replace( $content, ' data-attr="custom" data-msg="Foo Bar 1" ', $str_pos, 0 );
    
    return $content;

【讨论】：

该过滤器将 data-attr 添加到所有内容，如果字段不存在，它会在任何地方打印“data-attr”ecc。如何解决？ 您的表单似乎具有相同的元素名称。将字段名称更改为唯一的名称。请注意我编辑我的答案。 这个帮助很大，添加 autocomplete="both" autocomplete="off" 以禁用 DATE 选择器字段的 Chrome 自动填充下拉菜单。谢谢！ add_filter( 'wpcf7_form_elements', 'imp_wpcf7_form_elements' ); function imp_wpcf7_form_elements( $content ) $str_pos = strpos( $content, 'name="date-from"' ); $content = substr_replace( $content, ' autocomplete="both" autocomplete="off" ', $str_pos, 0 ); $str_pos = strpos( $content, 'name="date-to"' ); $content = substr_replace( $content, ' autocomplete="both" autocomplete="off" ', $str_pos, 0 ); return $content; 感谢 Tofandel，您的评论很有意义，我批准了您的答案编辑，并且变得更好了。【参考方案2】：

还可以添加多个属性。例如

add_filter( 'wpcf7_form_elements', 'imp_wpcf7_form_elements' );

function imp_wpcf7_form_elements( $content ) 
    $str_pos = strpos( $content, 'name="your-email-homepage"' );
    $content = substr_replace( $content, ' aria-describedby="emailHelp" ', $str_pos, 0 );

    $str_pos2 = strpos( $content, 'name="your-fname-homepage"' );
    $content = substr_replace( $content, ' aria-describedby="fnameHelp" ', $str_pos2, 0 );

    $str_pos3 = strpos( $content, 'name="your-lname-homepage"' );
    $content = substr_replace( $content, ' aria-describedby="lnameHelp" ', $str_pos3, 0 );
    return $content;

【讨论】：

【参考方案3】：

这是一个不涉及硬编码字段名称和属性的通用解决方案

add_filter( 'wpcf7_form_tag', function ( $tag ) 
    $datas = [];
    foreach ( (array)$tag['options'] as $option ) 
        if ( strpos( $option, 'data-' ) === 0 ) 
            $option = explode( ':', $option, 2 );
            $datas[$option[0]] = apply_filters('wpcf7_option_value', $option[1], $option[0]);
        
    
    if ( ! empty( $datas ) ) 
        $name = $tag['name'];
        $tag['name'] = $id = uniqid('wpcf');
        add_filter( 'wpcf7_form_elements', function ($content) use ($name, $id, $datas) 
            return str_replace($id, $name, str_replace("name=\"$id\"", "name=\"$name\" ". wpcf7_format_atts($datas), $content));
        );
    
    return $tag;
 );

它适用于所有数据属性，因此您可以像这样使用它

[text* my-name data-foo:bar data-biz:baz placeholder "Blabla"]
Output: <input type="text" name="my-name" data-foo="bar" data-biz="baz" placeholder="Blabla">

由于 wpcf7 不提供直接挂钩选项的方法，因此解决方案使用了一种技巧，将字段名称临时替换为唯一 ID，然后在稍后的过滤器中替换为正确的名称和添加的属性

如果您需要它处理的不仅仅是数据属性，您可以通过替换此行将更多属性列入白名单

if ( strpos( $option, 'data-' ) === 0 )

类似于以下内容

if ( preg_match( '/^(data-|pattern|my-custom-attribute)/', $option ) )

【讨论】：

无法使其与 CF7 v5.1.8 一起使用。 data-* 的东西被简单地忽略了。您是否使用 CF7 v5.1.8 测试过您的解决方案？ 是的，它仍然有效，只要确保属性就在名称之后，而不是像 placeholder "Blabla" 这样的属性之后，否则联系表单根本不会解析该字段（正则表达式问题，与我的代码）。我认为这个过滤器的向后兼容性没有理由被破坏，因为它的级别非常低 谢谢！你将如何提供像 [0-9()#&+*-=.]+ 这样的模式？我用你的解决方案试过了，无法创建输出。 $tag['name'] = $id = uniqid();这部分是错误的，因为它使电子邮件部分的字段 id 更改为 isntade 形式的 uniq id。所以应该是 - $tag['name'] = $id = $name; 请注意，此解决方案会破坏 CF7 的验证：使用自定义 data-* 属性的无效必需输入字段在提交时不会被赋予 wpcf7-not-valid CSS 类。【参考方案4】：

从 Tofandel 的解决方案进行扩展，以造福那些获得 99% 的成功但遇到验证问题的人 - 在我的情况下，我已经解决了这个问题，并希望提供一个与 Tofandel 一样远的扩展解决方案（将属性放入适当的表单中）而且在提交时也成功验证。

    add_filter('wpcf7_form_tag', function($tag) 
      $data = [];
      foreach ((array)$tag['options'] as $option) 
        if (strpos( $option, 'autocomplete') === 0) 
          $option = explode(':', $option, 2);
          $data[$option[0]] = apply_filters('wpcf7_option_value', $option[1], $option[0]);
        
      
      if(!empty($data)) 
        add_filter('wpcf7_form_elements', function ($content) use ($tag, $data) 
          $data_attrs = wpcf7_format_atts($data);
          $name = $tag['name'];
          $content_plus_data_attrs = str_replace("name=\"$name\"", "name=\"$name\" " . $data_attrs, $content);

          return $content_plus_data_attrs;
        );
      
      return $tag;
     );

与其将标签ID更改为随机值只是为了稍后将其替换为“真实”值，我们只是首先引用真实值，替换wpcf7_form_elements过滤器中的相关部分内容（在我的大小写，自动完成，但正如 Tofandel 的示例所示，这可以扩展到您想要的任何数据属性）。

【讨论】：

【参考方案5】：

我从 Tofandel 给出的没有 JS (CF7) 错误的解决方案中提出一个解决方案，并授权使用没有值的属性：

/**
 * Add custom attributes on inputs
 * Put "data-my-attribute" to use it, with or without value
 *
 * @param array $tag
 *
 * @return array
 */
function cf7AddCustomAttributes($tag) 
    $datas = [];

    foreach ((array) $tag['options'] as $option) 
        if (strpos($option, 'data-') === 0 || strpos($option, 'id:') === 0) 
            $option = explode(':', $option, 2);
            $datas[$option[0]] = apply_filters('wpcf7_option_value', $option[1], $option[0]);
        
    

    if (!empty($datas)) 
        $id = $tag['name'];

        if (array_key_exists('id', $datas)) 
            $id = $datas['id'];
         else 
            $tag['options'][] = "id:$id";
        

        add_filter('wpcf7_form_elements', function ($content) use ($id, $datas) 
            $attributeshtml = '';
            $idHtml = "id=\"$id\"";

            foreach ($datas as $key => $value) 
                $attributesHtml .= " $key";

                if (is_string($value) && strlen($value) > 0) 
                    $attributesHtml .= "=\"$value\"";
                
            

            return str_replace($idHtml, "$idHtml $attributesHtml ", $content);
        );
    

    return $tag;

add_filter('wpcf7_form_tag', 'cf7AddCustomAttributes');

【讨论】：

【参考方案6】：

我用这个简单的方法来设置属性

[checkbox optName use_label_element "optName"]
<script>
document.querySelector(".optName").setAttribute("onchange","myscript");
</script>

【讨论】：

以上是关于如何添加自定义属性？的主要内容，如果未能解决你的问题，请参考以下文章

H5自定义属性的规定和添加获取自定义属性的方法

C#自定义控件中如何动态添加属性

TS TypeScript window 添加自定义属性

如何添加自定义属性？

自定义控件如何给特殊类型的属性添加默认值 z（转）

Vuejs如何给元素添加自定义属性