从表单中获取ID有点棘手，因为它是动态创建的。通常，当按下保存按钮时，我会使用此JS触发一个事件：
jQuery(document).ready(
function($) {
$( \'.widget-control-save\' ).on( \'click\',
function() {
// grab the ID of the save button
var saveID = $( this ).attr( \'id\' );
// grab the \'global\' ID
var ID = saveID.replace( /-savewidget/, \'\' );
}
);
}
);
你是个好人，所以你用
get_field_id() 和
get_field_name() 在你的小部件代码中，嗯！？
printf(
\'<input type="text" id="%s" name="%s" value="%d" />\',
$this->get_field_id( \'width\' ),
$this->get_field_name( \'width\' ),
(int) $instance[\'width\']
);
输入字段的ID类似于
your-widget-name-[number]-width. 问题是数字，每次在侧边栏中添加或删除小部件时，数字都会有所不同。在上面的JS中，变量
ID 现在得到了值
your-widget-name-[number] （例如。
your-widget-name[2]). 所以你只需添加
-width 到
ID 并且可以获取输入字段的值
var width = $( \'#\' + ID + \'-width\' ). val();
// validate the value of the input field with parseInt() or something else
但是如果我期望一个数字，那么我不会让用户输入字符。阻止用户键入字符不是问题。
add_filter( \'widget_form_callback\', \'prevent_char_input\', 1, 2 );
function prevent_char_input( $instance, $object ) {
// assuming your widgets id is \'foo_widget\'
if ( \'foo_widget\' !== $object->id_base || ! is_integer( $object->number ) )
return $instance;
echo "
<script>
jQuery(document).ready( function($) {
var input = $( \'#widget-{$object->id}-width\' );
input.keydown(function(event) {
// Allow: backspace, delete, tab, escape, and enter
if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
// Allow: Ctrl+A
(event.keyCode == 65 && event.ctrlKey === true) ||
// Allow: home, end, left, right
(event.keyCode >= 35 && event.keyCode <= 39)) {
// let it happen, don\'t do anything
return;
}
else {
// Ensure that it is a number and stop the keypress
if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
event.preventDefault();
}
}
});
} );</script>";
return $instance;
}
所以我们在这里要做的是，打印一些内联脚本。每当打印小部件内的html表单时，PHP函数都会检查小部件名称是否匹配以及小部件编号是否为整数。我们使用对象属性
id_base 和
id. 这个
id_base 是注册小部件时使用的id。这个
id 是小部件id加上侧栏中的数字（例如。
foo_widget-2).
最佳做法是避免使用内联脚本。您可以创建jQuery扩展并将其排入页脚。这将内联脚本减少到$( \'#widget-{$object->id}-width\' ).numbersOnly(); 在javascript中，类似于：
(function( $ ){
$.fn.numbersOnly = function() {
this.keydown(function() {
[... code here ...]
});
};
})( jQuery );
我希望这能帮助您找到最佳解决方案。
