时间戳

首页 > 解决方案 > 关于注册表单的启用和禁用字段？

javascript - 关于注册表单的启用和禁用字段？

问题描述

我必须创建一个注册表单，其中包含名字、姓氏、地址、联系方式、电子邮件等字段。最初只有名字应该可见，因为我输入名字它应该启用姓氏，因为我输入姓氏它应该启用地址

标签： javascript

解决方案

我对此有完全不同的看法。这种方法没有任何问题。事实上，有许多很酷的 UI 设计具有相同的术语。typeform.com 就是一个很好的例子。

这在 SO 是非常糟糕的做法，降低新用户评分有什么意义。

如果你不能给出正确的建议，那么你没有权利仅仅因为你没有理解他的观点而贬低他。

回答这个问题：如果它只是以错误的方式实现它，那将是一个非常糟糕的主意，用户可能会对此感到恼火。

最好使用 CSS 和 JS (jquery) 的组合来实现这一点，以获得美观​​、用户友好的 UI。

找到我使用 jQuery 创建的这个小片段可能会对您有所帮助。用一点 css 就可以让它看起来很棒！

在文本框中输入详细信息后按回车键。

jQuery.extend(jQuery.expr[':'], {
  focusable: function(el, index, selector) {
    return $(el).is('a, button, :input,[tabindex]');
  }
}); // extention to jquery
$("#res").hide();
$("#email").hide();
$("#mobile").hide();
//Focuse Next on Enter press
$(document).on('keypress', 'input,select', function(e) {
  if (e.which == 13) {
    e.preventDefault();
    var $focusable = $(':focusable');
    var index = $focusable.index(document.activeElement) + 1;
    if (index >= $focusable.length) index = 0;
    $focusable.eq(index - 1).hide();
    $focusable.eq(index).show();
    $focusable.eq(index).focus();
  }
});

function subscribeRelease() {
  $("#res").show(200);
  $(".btn").hide(200);
}
body,
html {
  height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<div class="container-fluid h-100 justify-content-center">
  <div class="row justify-content-center align-middle h-100">
    <div class="col-10 text-center align-self-center">
      <h1 style="font-size:40pt;">Register</h1>
      <form id="register" class="form-inline justify-content-center">

        <input type="text" class="form-control" id="name" placeholder="Name" /><br>
        <input type="text" class="form-control" id="email" placeholder="Email" /><br>
        <input type="text" class="form-control" id="mobile" placeholder="Mobile" /><br>

        <br><br><br>
        <button class="btn btn-info" onclick="subscribeRelease(); return false;">Submit!</button>
        <span id="res"><h3 class="text-success">Registration Completed!</h3></span>
      </form>
    </div>
  </div>
</div>

推荐阅读