对输入错误消息使用callout而不是alerts

use callouts instead of alerts for input error messages

本文关键字：alerts callout 输入 错误 消息      更新时间：2023-09-26

是否可以在调出或气泡中弹出类似"用户名必须是六个字符"的用户错误消息，而不是

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

调用不需要任何用户交互，并且在给定的一段时间（如两秒）后应自行消失。

如果您想要自定义弹出窗口，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>

这很整洁：

<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（就像使用警报时一样）

相关文章：