Question

我有一个<input type="number">，我希望将用户的输入限制为纯数字或数字，小数位数最多为2位小数。

基本上，我要求输入价格。

我想避免做正则表达式。有办法吗？

<input type="number" required name="price" min="0" value="0" step="any">

Answer 1

而不是step=".01"，允许任意数量的小数位，使用public class Program_Lure_list_Adapter extends BaseAdapter implements View.OnClickListener { private static ArrayList<Program_Lure_Sound> programLureList; private LayoutInflater l_inflater; private int mPosition; private int[] Image = {R.drawable.blacksound}; ViewHolder viewHolder; ViewHolder selectedHolder; private Activity activity; public Program_Lure_list_Adapter(Activity a, ArrayList<Program_Lure_Sound> result) { activity = a; programLureList = result; l_inflater = (LayoutInflater)activity. getSystemService(Context.LAYOUT_INFLATER_SERVICE); } /*public Program_Lure_list_Adapter(Context context, ArrayList<Program_Lure_Sound> result) { programLureList = result; l_inflater = LayoutInflater.from(context); }*/ @Override public int getCount() { return programLureList.size(); } /*@Override public Object getItem(int i) { return null; }*/ public Object getItem(int position) { return position; } /*@Override public long getItemId(int i) { return 0; }*/ public long getItemId(int position) { return position; } @Override public View getView(final int i, View view, ViewGroup viewGroup) { if (view == null) { view = l_inflater.inflate(R.layout.layout_programlure_listitem, viewGroup, false); viewHolder = new ViewHolder(); viewHolder.iv_Image_souund = (ImageView) view.findViewById(R.id.imageView29); viewHolder.tv_soundName = (TextView) view.findViewById(R.id.textView92); viewHolder.tv_selected = (TextView) view.findViewById(R.id.textView_selected); view.setTag(viewHolder); } else viewHolder = (ViewHolder) view.getTag(); viewHolder.iv_Image_souund.setImageResource(Image[programLureList.get(i).getSoundImage()]); viewHolder.tv_soundName.setText(programLureList.get(i).getSoundName()); viewHolder.tv_selected.setVisibility(View.GONE); view.setTag(viewHolder); view.setOnClickListener(this); return view; } @Override public void onClick(final View v) { v.post(new Runnable() { @Override public void run() { ViewHolder holder = ((ViewHolder) v.getTag()); holder.tv_selected.setVisibility(View.VISIBLE); if (selectedHolder != null) selectedHolder.tv_selected.setVisibility(View.INVISIBLE); selectedHolder = holder; } }); } public class ViewHolder{ TextView tv_soundName; ImageView iv_Image_souund; TextView tv_selected; } private class OnItemClickListener implements OnClickListener{ private int mPosition; OnItemClickListener(int position){ mPosition = position; } @Override public void onClick(View arg0) { Activity_program_lure sct = (Activity_program_lure)activity; sct.onItemClick(mPosition); } }，最多允许两位小数。

规范中的更多详细信息：https://www.w3.org/TR/html/sec-forms.html#the-step-attribute

Answer 2

如果有人正在寻找只允许带有可选2位小数的数字的正则表达式

^\d*(\.\d{0,2})?$

举个例子，我发现下面的解决方案相当可靠

HTML：

<input name="my_field" pattern="^\d*(\.\d{0,2})?$" />

JS / JQuery：

$(document).on('keydown', 'input[pattern]', function(e){
  var input = $(this);
  var oldVal = input.val();
  var regex = new RegExp(input.attr('pattern'), 'g');

  setTimeout(function(){
    var newVal = input.val();
    if(!regex.test(newVal)){
      input.val(oldVal); 
    }
  }, 0);
});

Answer 3

对于货币，我建议：

<div><label>Amount $
    <input type="number" placeholder="0.00" required name="price" min="0" value="0" step="0.01" title="Currency" pattern="^\d+(?:\.\d{1,2})?$" onblur="
this.parentNode.parentNode.style.backgroundColor=/^\d+(?:\.\d{1,2})?$/.test(this.value)?'inherit':'red'
"></label></div>

请参阅http://jsfiddle.net/vx3axsk5/1/

HTML5属性“step”，“min”和“pattern”将在表单提交时验证，而不是onblur。如果您有step，则不需要pattern，如果您有pattern，则不需要step。因此，您可以使用我的代码恢复到step="any"，因为该模式无论如何都会验证它。

如果您想验证onblur，我相信为用户提供视觉提示也很有用，例如将背景着色为红色。如果用户的浏览器不支持type="number"，则会回退到type="text"。如果用户的浏览器不支持HTML5模式验证，我的JavaScript代码段不会阻止表单提交，但它提供了一个视觉提示。因此，对于HTML5支持较差的人，以及在禁用JavaScript或伪造HTTP请求的情况下试图入侵数据库的人，您需要再次在服务器上进行验证。前端验证的要点是提供更好的用户体验。因此，只要您的大多数用户都拥有良好的体验，就可以依赖HTML5功能，前提是代码仍然有效，您可以在后端进行验证。

Answer 4

第1步：将您的HTML数字输入框挂钩到onchange事件

myHTMLNumberInput.onchange = setTwoNumberDecimal;

或HTML代码

<input type="number" onchange="setTwoNumberDecimal" min="0" max="10" step="0.25" value="0.00" />

第2步：编写setTwoDecimalPlace方法

function setTwoNumberDecimal(event) {
    this.value = parseFloat(this.value).toFixed(2);
}

您可以通过更改传递到toFixed()方法的值来更改小数位数。请参阅MDN docs。

toFixed(2); // 2 decimal places
toFixed(4); // 4 decimal places
toFixed(0); // integer

Answer 5

尝试此选项，仅允许输入类型中的2位小数

<input type="number" step="0.01" class="form-control"  />

Answer 6

我发现使用jQuery是我最好的解决方案。

$( "#my_number_field" ).blur(function() {
    this.value = parseFloat(this.value).toFixed(2);
});

Answer 7

使用此代码

<input type="number" step="0.01" name="amount" placeholder="0.00">

默认情况下，HTML5输入元素的步长值为step =“1”。

Answer 8

只写

<input type="number" step="0.1" lang="nb">

lang ='nb“让您用逗号或句点写小数点

Answer 9

你可以使用这个。反应钩子

<input
                  type="number"
                  name="price"
                  placeholder="Enter price"
                  step="any"
                  required
                />

Answer 10

输入时：

step="any"
class="two-decimals"

在剧本上：

$(".two-decimals").change(function(){
  this.value = parseFloat(this.value).toFixed(2);
});

在<input type =“number”/>中允许2个小数位

10 个答案: