我使用CakePHP构建的应用程序中的几个表单字段会为它们的值收集百分比。我希望用户能够以熟悉的百分比(24.5%)格式查看和编辑百分比,但为了简化计算逻辑,我希望以十进制(.245)格式存储它。由于有几个这样的字段,我宁愿不必将每个百分比字段的转换逻辑写入控制器。自动转换百分比输入值
是否有人知道自动执行此转换的简单解决方案,还是我坚持编写自定义帮助程序/行为来解决此问题?
解决方案
我最后写一个jQuery插件处理这个。这是任何人谁可能需要在将来:
/**
* Input Percent
*
* Percentages are tricky to input because users like seeing them as 24.5%, but
* when using them in calculation their value is actually .245. This plugin
* takes a supplied field and automatically creates a percentage input.
*
* It works by taking an input element and creating a hidden input with the same
* name immediately following it in the DOM. This has the effect of submitting
* the proper value instead of the human only one. An onchange method is then
* bound to the original input in order to keep the two synced.
*
* Potential Caveats:
* * There will be two inputs with the same name. Make sure anything you
* script against this field is prepared to handle that.
*
* @author Brad Koch <[email protected]>
*/
(function($) {
$.fn.inputPercent = function() {
return this.each(function() {
var display_field = this;
var value_field = $('<input type="hidden" />').get(0);
// Initialize and attach the hidden input.
$(value_field).attr('name', $(this).attr('name'));
$(value_field).val($(display_field).val());
$(display_field).after(value_field);
$(display_field).after('%');
// Convert the display field's proper percent value into the display format.
if (isFinite($(display_field).val())) {
$(display_field).val($(display_field).val() * 100);
}
// Enable synchronization between the two.
$(this).bind('change', function() {
var value = $(display_field).val();
// Handle non-numeric values.
if (isFinite(value)) {
$(value_field).val(value/100);
} else {
$(value_field).val(value);
}
});
});
};
})(jQuery);
用法:
$('input.percent').inputPercent();
这就是我最终做的。我在这个问题上发布了这个实现。 –