Question

是否可以在标注或气泡中弹出用户错误消息，例如“用户名必须为六个字符”，而不是

alert("User name must be six characters");

标注不应该要求任何用户交互，并且应该在一段时间后（例如两秒钟）自行消失。

Answer 1

如果你想要一个自定义弹出窗口CSS是主要的竞争者。所有Javascript需要做的是在期望的条件下切换它。

<script>
  function popup(){
    warning.style.display='block';
    setTimeout(function(){
      warning.style.display='none';
    },2000);
  }
</script>

<body>
  <button onclick='popup()'>Button</button>
  <div id='warning' style='display:none;'>DONT DO THAT!</div>
</body>

Answer 2

这很整洁：

<head> 
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> 
$(document).on('pageinit', function(){

  // Initialise the popup widget
  $('#errmsgDiv').popup();

  // Register a new user
  $(document).on('click', '#Register', function(evnt) {
    if (userName == "" || password == "" || emailAddress == "") {
//      alert("Complete all the input fields");
      errmsgPopper("Complete all the input fields");
      evnt.stopImmediatePropagation();
      return false;
    }
  });

  // Popup error message for 2 seconds
  function errmsgPopper(msg){
    $('#errmsgDiv').html(msg).popup('open');
    setTimeout(function(){
      $('#errmsgDiv').popup('close');
    },2000);
  }

</SCRIPT>
</head>
<body>
.
.
.
  <div id="errmsgDiv" data-role="popup"><p>msg text</p></div>
</body>

仍然需要一些工作，因为弹出窗口需要将自己定位在错误字段上，并指向错误字段。稍后会添加这些。

我唯一的问题是

  $('#UserName').focus();

不再为UserName提供焦点（就像使用警报时那样）

使用标注而不是警报输入错误消息

2 个答案: