什么可以覆盖 html 输入中的属性？
Posted
技术标签:
【中文标题】什么可以覆盖 html 输入中的属性？【英文标题】：What can override the attributes in an html input? 【发布时间】：2015-12-27 16:05:13 【问题描述】：我正在使用 php 将我想要的值输出到 html 输入中。但由于某种原因，它无法识别 min 和 step 属性。 html属性如何被覆盖？
编辑 - 我正在为 Wordpress 定制 Anspress。 Here is a link to look through the files for the plugin.
有什么想法吗？？
构成输出的 HTML（ap_ask_form() 在下面的 PHP 代码中）
<div id="ap-form-main" class="active ap-tab-item">
<?php ap_ask_form(); ?>
</div>
ask_form.php
class AnsPress_Ask_Form
public function __construct()
add_filter('ap_ask_form_fields', array($this, 'ask_form_name_field'));
public function ask_form_name_field($args)
if(!is_user_logged_in() && ap_opt('allow_anonymous'))
$args['fields'][] = array(
'name' => 'name',
'label' => __('Name', 'ap'),
'type' => 'text',
'placeholder' => __('Enter your name to display', 'ap'),
'value' => sanitize_text_field(@$_POST['name'] ),
'order' => 12
);
return $args;
new AnsPress_Ask_Form;
/**
* Generate ask form
* @param boolean $editing
* @return void
*/
function ap_ask_form($editing = false)
global $editing_post;
$is_private = false;
if($editing)
$is_private = $editing_post->post_status == 'private_post' ? true : false;
$args = array(
'name' => 'ask_form',
'is_ajaxified' => true,
'submit_button' => ($editing ? __('Update question', 'ap') : __('Post question', 'ap')),
'fields' => array(
array(
'name' => 'title',
'label' => __('Title', 'ap'),
'type' => 'text',
'placeholder' => __('Question in one sentence', 'ap'),
'desc' => __('Write a meaningful title for the question.', 'ap'),
'value' => ( $editing ? $editing_post->post_title : sanitize_text_field( @$_POST['title'] ) ),
'order' => 5,
'attr' => 'data-action="suggest_similar_questions"',
'autocomplete' => false,
),
array(
'name' => 'title',
'type' => 'custom',
'order' => 5,
'html' => '<div id="similar_suggestions"></div>'
),
array(
'name' => 'description',
'label' => __('Description', 'ap'),
'type' => 'editor',
'desc' => __('Write description for the question.', 'ap'),
'value' => ( $editing ? apply_filters('the_content', $editing_post->post_content) : @$_POST['description'] ),
'settings' => apply_filters( 'ap_ask_form_editor_settings', array(
'textarea_rows' => 8,
'tinymce' => ap_opt('question_text_editor') ? false : true,
'quicktags' => ap_opt('question_text_editor') ? true : false ,
'media_buttons' =>false,
)),
),
array(
'name' => 'ap_upload',
'type' => 'custom',
'html' => ap_post_upload_form(),
'order' => 10
),
array(
'name' => 'parent_id',
'type' => 'hidden',
'value' => ( $editing ? $editing_post->post_parent : get_query_var('parent') ),
'order' => 20
)
),
);
if(ap_opt('allow_private_posts'))
$args['fields'][] = array(
'name' => 'is_private',
'type' => 'checkbox',
'desc' => __('Only visible to admin and moderator.', 'ap'),
'value' => $is_private,
'order' => 12,
'show_desc_tip' => false
);
if(ap_opt('recaptcha_site_key') == '')
$reCaptcha_html = '<div class="ap-notice red">'.__('reCaptach keys missing, please add keys', 'ap').'</div>';
else
$reCaptcha_html = '<div class="g-recaptcha" id="recaptcha" data-sitekey="'.ap_opt('recaptcha_site_key').'"></div><script type="text/javascript"
src="https://www.google.com/recaptcha/api.js?hl='.get_locale().'&onload=onloadCallback&render=explicit" async defer></script><script type="text/javascript">var onloadCallback = function()
widgetId1 = grecaptcha.render("recaptcha",
"sitekey" : "'.ap_opt('recaptcha_site_key').'"
);
;</script>';
if(ap_opt('enable_recaptcha'))
$args['fields'][] = array(
'name' => 'captcha',
'type' => 'custom',
'order' => 100,
'html' => $reCaptcha_html
);
/**
* FILTER: ap_ask_form_fields
* Filter for modifying $args
* @var array
* @since 2.0
*/
$args = apply_filters( 'ap_ask_form_fields', $args, $editing );
if($editing)
$args['fields'][] = array(
'name' => 'edit_post_id',
'type' => 'hidden',
'value' => $editing_post->ID,
'order' => 20
);
$form = new AnsPress_Form($args);
echo $form->get_form();
echo ap_post_upload_hidden_form();
/**
* Generate edit question form, this is a wrapper of ap_ask_form()
* @return void
* @since 2.0.1
*/
function ap_edit_question_form()
ap_ask_form(true);
我使用 Wordpress 钩子“plugins_loaded”对此插件的扩展（下面的ask_form_amount_field($args, $editing) 是我制作的课程的一部分；如果有人想让我发布它，我可以，只是想显示所有相关信息，不要让它太长......）
public function ask_form_amount_field($args, $editing)
if(wp_count_terms('question_amount_field') == 0)
return $args; //Taxonomy stuff?
global $editing_post;
if($editing)
$amount_field = get_the_terms( $editing_post->ID, 'question_amount_field' );
$amount_field = $amount_field[0]->term_id;
//More things purely related to taxonomy, it seems.
$args['fields'][] = array(
'name' => 'amount_field',
'label' => __('Amount field label', 'amount_field_for_anspress'),
'type' => 'number',
'value' => ( $editing ? $amount_field : sanitize_text_field(@$_POST['amount_field'] )),
'taxonomy' => 'question_amount_field',
'orderby' => ap_opt('form_amount_field_orderby'),
'desc' => __('Enter the amount you wish to tip someone for fulfilling your request.', 'amount_for_anspress'),
'order' => 7,
'min' => 0.50,
'step' => 0.25
);
return $args;
//The class ends here; its beginning is not shown above
function find_do_for_anspress()
$discounts = new Find_Do_For_AnsPress();
add_action( 'plugins_loaded', 'find_do_for_anspress' );
【问题讨论】：
这不是输出任何东西，如果输出是问题，请发布执行输出的部分。或者如果这是某个库/框架的一部分，则发布您正在使用的库。 @adelphia 我认为这涵盖了所有内容。我想我认为，作为一个菜鸟，这个问题会被社区拒绝，所以我只想知道一般什么会覆盖 HTML 属性？例如，如果我有一个简单的<input type="number" value="0.50" step="0.25">，什么样的代码可以过滤它来表达其他内容？ PHP中有什么东西可以修改HTML属性吗？如果是这样，我可以开始在这个插件的所有代码行中搜索一些关键字
社区拒绝不尽职调查并提出适当问题的人，它不会仅仅因为是菜鸟而拒绝人。我不熟悉任何形式的建筑助手'已经开始了，但是 javascript 是一种选择吗？这听起来很简单..
好的，我们试试 JS 解决方案。你有什么建议？
@Adelphia 有任何搜索字词我可以开始谷歌搜索吗？
【参考方案1】：
好的，你说 JavaScript 灵魂可以工作，所以这里是如何覆盖 JS 中的属性。您需要使用此方法为您的项目提供一个 id 属性。我们假设您的元素也有一个 id="myelement" 属性来识别它。
这是 jsFiddle 示例，其中 cmets 解释了代码。
var myelement = document.getElementById('myelement');
myelement.removeAttribute("min");
myelement.removeAttribute("step");
var min = document.createAttribute('min');
var step = document.createAttribute('step');
min.value = '100'; //put your new values here
step.value = '100'; //put your new values here
myelement.setAttributeNode(min);
myelement.setAttributeNode(step);
alert(myInput.getAttribute('custom-attr'));
【讨论】：
【参考方案2】：这是一个更短的 jQuery javascript 解决方案，请注意，由于 Wordpress 实现 jQuery 的方式，您可能需要将 $ 更改为 jQuery
//set values
minValue = 100;
stepValue = 100;
//select element by ID, update min attribute
$("#my-element-id").attr("min", minValue);
//select element by ID, update step attribute
$("#my-element-id").attr("step", minValue);
这里是关于 jQuery attr() 的文档以获取更多信息，它可用于获取和/或设置属性： https://api.jquery.com/attr/
【讨论】：
以上是关于什么可以覆盖 html 输入中的属性？的主要内容，如果未能解决你的问题，请参考以下文章
如何从覆盖的雄辩的 save() 方法访问模型属性？ （将空输入转换为空）
为啥我设置textarea 中的placeholder 会被一行空白可输入的 覆盖掉?