1

我想在更改输入字段时切换提交按钮的可见性。

由于type="number"Firefox 不支持 HTML5 输入，因此我使用stepper jQuery 插件。

提交按钮最初是隐藏的，当对包括步进器在内的任何表单字段进行更改时，应该显示提交按钮，但是当我更改数字时，不会触发更改事件。

在 Chrome 中，type="number"字段的默认事件可以正常工作

HAML

.form-actions.hide{
     :style => 'border-top: none; 
     border-bottom: solid 1px; 
     border-bottom-color: #08C;'
}
%button#submit{
     :type => "submit", 
     :class => 'btn btn-primary', 
     :style => 'margin-top: -28px;'
} Submit

JavaScript

if(BrowserDetect.browser == "Firefox"){
   $('#count').stepper();
}
$('#manage form input[type!=submit], select').change(function() {
   $('#manage form .form-actions').show();
});
4

1 回答 1

1

检测浏览器并不是最佳选择。而是检测对数字的支持

function hasNumber() {
  var inp = document.createElement("input");
  inp.setAttribute("type", "number");
  return inp.type !== "text";
}

然后根据您需要的文档

function changeField() {
  $('#manage form .form-actions').show();
}
$(function() {
  if (!hasNumber()) {
  $('#manage form input[type!=submit], select').change(changeField);
    $('#count').stepper({
      onStep: function( val, up ) {
        changeField();
      }
    });
  }
});
于 2013-05-04T05:06:38.527 回答