如何在 Laravel Blade 模板中添加 input type="number"？答案

【问题标题】：How to add input type="number" in Laravel Blade template?如何在 Laravel Blade 模板中添加 input type="number"？
【发布时间】：2016-05-09 20:02:19
【问题描述】：

我想创建一个用户只能输入数字的输入字段。在 HTML5 中，我们可以使用<input type="number">。我如何在刀片中执行此操作？

我试过了：

{!! Form::number('amount', null, array('class' => 'form-control')) !!}

【问题讨论】：

标签： html laravel laravel-5 blade

【解决方案1】：

我可以搜索并编码。由于没有直接的答案，我想在下面发布工作代码：

{!! Form::input('number', 'amount', null, ['class' => 'form-control']) !!}

【讨论】：

【解决方案2】：

您可以使用Form::input() 方法或Form::number() 方法来实现您的目标。

Form::input() 方法

这个方法有 4 个参数。

$type -（必需）第一个参数指定输入的类型。接受“文本”、“数字”、“密码”、“文件”等值。
$name -（必需）第二个参数是名称。
$value -（可选）第三个参数是输入字段的值。
$options - （可选）第四个参数是一个附加字段属性的数组。该数组可以填充具有“id”、“size”或“class”等键的项。

例子：

{{ Form::input('number', 'name') }}
{{ Form::input('number', 'name', 'value', ['class' => 'number', 'id' => 'numberField']) }}

//both example will create elements like this

<input name="name" type="number" value="value">
<input name="name" type="number" value="value" class="number" id="numberField">

Form::number() 方法

此方法接受 3 个参数。

$name -（必需）第一个参数是名称。
$value -（可选）第二个参数是输入字段的值。
$options -（可选）第三个参数是附加字段属性的数组。该数组可以填充具有“id”、“size”或“class”等键的项。

例子：

Form::number('name')
Form::number('name', null, ['class' => 'number', 'id' => 'numberField'])

//both example will create elements like this

<input name="name" type="number">
<input name="name" type="number" class="number" id="numberField">

提示：如果您想使用$options 并且不想指定任何默认值，请在$value 参数中使用null。

【讨论】：

【解决方案3】：

最小值为 0 的输入字段。

{!! Form::number('count', $value = '' , ['min' => '0' ,'class' => 'form-control', 'id' => 'number_count','required']) !!}

【讨论】：

【解决方案4】：

{!!  Form::input('number', 'weight', null, ['id' => 'weight', 'class' => 'form-control', 'min' => 1, 'max' => 9999, 'required' => 'required']) !!}

【讨论】：

【解决方案5】：

你可以使用javascript：

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

在你的 html 中：

<input name="input_name" onkeypress="return isNumberKey(event)">

【讨论】：