Kartik Yii2数字-从扩展中获取价值

Question

我正在使用Kartik Yii2编号，使用此扩展获取值时遇到问题。。

我需要使用onkeypress、onkeyup或onkeydown来调用javascript函数，但这个扩展只允许我使用onchange来调用javascript功能。。

这是我的表单代码：

<?= $form->field($target, "[$index]anggaran")->widget(NumberControl::classname(), [
'maskedInputOptions' => [
'prefix' => 'Rp. ',
'groupSeparator' => '.',
'radixPoint' => ',',
'allowMinus' => false,
'digits' => 1000,
],
'options' => ['onkeypress' => 'kalkulasiAnggaran()'],
'displayOptions' => ['class' => 'form-control kv-monospace'],
])->label(false) ?>

这是我的javascript函数：

function kalkulasiAnggaran()
{
var total_anggaran = 0;
total_anggaran = parseFloat($("#anggaran").val());
console.log(total_anggaran.toFixed(2));
}

我能做些什么来解决这个问题吗？？。。

Answer 1

您可以添加自己的JavaScript来处理更改，插件只需隐藏实际输入，并将其替换为具有相同Id并后跟-disp的显示输入。

例如，如果您的输入是mymodel-attr，则生成的显示输入将是：

<input type="text" 
id="mymodel-attr-disp" 
class="form-control kv-monospace" 
name="expense-unit_price-disp" 
value="250.00" 
style="text-align: right;"
>

编写一些JS来处理更新事件并将其添加到页面中，例如，如果您想将其直接添加到视图文件中：

<?php
$js = <<<'JS'
$(document).ready(function () {
const $input = $('#mymodel-attr-disp');
$input.keydown(function () {
const newValue = $(this).val();
console.log(`(jquery keydown event) I changed to ${newValue}`);
});
$input.keyup(function () {
const newValue = $(this).val();
console.log(`(jquery keyup event) I changed to ${newValue}`);
});
$input.on('input', function () {
const newValue = $(this).val();
console.log(`(jquery input event) I changed to ${newValue}`);
});
});
JS;
$this->registerJs($js);

更新：使用动态生成的ID

不要像原来的例子那样使用nowdoc，而是更新代码以使用heredoc，然后在JS:中使用PHP变量的值

<?php
$inputId = 'model-attribute';
$js = <<<JS
$(document).ready(function () {
const input = $('#$inputId-disp');
input.keydown(function () {
const newValue = $(this).val();
console.log('(jquery keydown event) I changed to ' + newValue);
});
input.keyup(function () {
const newValue = $(this).val();
console.log('(jquery keyup event) I changed to ' + newValue);
});
input.on('input', function () {
const newValue = $(this).val();
console.log('(jquery input event) I changed to ' + newValue);
});
});
JS;
$this->registerJs($js);

请注意，上面的代码是PHP，JS只是PHP代码中的一个字符串，因此您确实可以在处理它时获得很大的灵活性，而代价是在每次请求时发送代码。

您有几种方法可以对此进行优化，例如：

1. 使用小部件上的options属性来分配ID:'options' => ['id' => 'my-input-id']，然后将所有JS移动到一个文件中，并使用Yii的资产加载它
2. 只输出视图文件上的动态ID，使JS依赖于具有处理input事件的逻辑的文件

您可以使用以下代码段来测试哪些操作会触发输入上的不同事件：

$(document).ready(function() {
const $input = $('#mymodel-attr-disp');
$input.keydown(function() {
const newValue = $(this).val();
console.log(`(jquery keydown event) I changed to ${newValue}`);
});
$input.keyup(function() {
const newValue = $(this).val();
console.log(`(jquery keyup event) I changed to ${newValue}`);
});
$input.on('input', function() {
const newValue = $(this).val();
console.log(`(jquery input event) I changed to ${newValue}`);
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="mymodel-attr-disp" class="form-control kv-monospace" name="expense-unit_price-disp" value="250.00" style="text-align: right;">

输入似乎是您想要的，即它将处理粘贴事件，但当只按下ctrl时不会触发，但您可以使用上面的不同事件处理程序来测试，看看哪种行为更适合您的需求，然后删除不需要的行为。

Answer 2

在进一步挖掘Kartik Yii2 Number代码后，我意识到extension已经使用了所有键盘事件(keyup、keydown、keypress(来解析所有输入，因此用户不能直接使用键盘事件来获取值，剩下的所有可以在extension中使用的事件都是change事件，但我们可以启动独立的JavaScript来使用键盘事件(keyup、keydown、keypress(。。

正如我之前提到的，我使用带有动态ID的form，因为form在foreach循环中，而不是像@RaulSauco建议的那样捕获动态ID，我将class强制转换为所有具有相同class名称的循环form，并在JavaScript中检查包含确切class的form，我需要使用regex来解析form中的所有值，因为它包含prefix、suffix，以及来自CCD_ 33的所有CCD_。。

这是我的全部代码。。

控制器：

$count = 6;
for($i = 1; $i < $count; $i++)
{
$model[] = new commonmodelsTotal();
}
return $this->render('form', [
'model' => $model,
'count' => $count,
]);

形式：

$this->registerJs("
$(document).ready(function() {
function kalkulasiAnggaran()
{
var count = $count;
var total_anggaran = 0;
for(i=0; i<count; i++)
{
total_anggaran += parseFloat($('#'+i+'_target_rp-disp').val().replace(/[^0-9,]/g, '').replace(/,/g, '.') );
}
console.log(total_anggaran.toFixed(2));
}
$('.target_rp').keyup(function() {
kalkulasiAnggaran();
});
kalkulasiAnggaran();
});
");
<?php foreach($model as $index => $target) { ?>
<?= $form->field($target, "[$index]target_rp")->widget(NumberControl::classname(), [
'maskedInputOptions' => [
'prefix' => 'Rp. ',
'groupSeparator' => '.',
'radixPoint' => ',',
'allowMinus' => false,
'digits' => 1000,
],
'options' => ['value' => $target->isNewRecord ? '0' : $target->target_rp],
'displayOptions' => ['id' => $index.'_target_rp-disp', 'class' => 'form-control kv-monospace target_rp'],
])->label(false) ?>
<?php } ?>

就是这样，当用户输入时，我可以使用keyup事件来获得直接值。。

这不是理想的方法，因为我必须捕获所有用户输入并将其解析为实际数字，但它很有效。。

如果你们有任何简单或快速的方法，请公布你们的答案。。