IE11和一个基于Javascript的Modal形式的表演滑稽

Question

我在WordPress存储库中有一个名为简易年龄验证器的WordPress插件，并得到了一个让我感到困惑的支持请求。以下是他的信息：

在Windows 10上的资源管理器11上，无法填充字段。单击字段似乎激活了字段下方某个闪烁的文本行，而输入数字则没有任何作用。我不能包括一个链接，因为该网站正在开发。

我在我的测试环境上安装了简单的啤酒Lister，谁知道呢？我也有同样的问题。

运行此插件的代码可以在存储库中看到，但我将继续将创建表单的代码的副本放在这里。

还有其他人经历过这个问题吗？如果是的话，你能告诉我是什么原因造成的，以及我如何解决这个问题吗？谢谢!

​

//For the max value of the input in the age form
taseavCurrDate = new Date();
if(taseavData.debug == true){
  var taseavDebugLog = [];
}

function taseavDebug(log){
  if(taseavData.debug == true){
    console.log(log);
    taseavDebugLog.push(log);
  }
  return
}

//Gets the cookie that was just stored
function taseavGetCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
    }
    return false;
}

//The actual form
function taseavAgeForm(){
  var result;
  result =  "<div id='taseav-age-verify' class='" + taseavData.wrapperClass + "'>";
  result +=   "<form class='" + taseavData.formClass + "'>";
  result +=   "<h2>" + taseavData.formTitle + "</h2>";
  result +=     "<div class='taseav-month'>";
  result +=     "<label>Month</label>";
  result +=     "<input name='month' type='number' min='1' max='12' required>";
  result +=     "</div>";
  result +=     "<div class='taseav-day'>";
  result +=     "<label>Day</label>";
  result +=     "<input name='day' type='number' min='1' max='31' required>";
  result +=     "</div>";
  result +=     "<div class='taseav-year'>";
  result +=     "<label>Year</label>";
  result +=     "<input name='year' type='number' min='1900' max='"+ taseavCurrDate.getFullYear() +"' required>";
  result +=     "</div>";
  result +=     "<input type='submit' value='submit'>";
  result +=   "</form>";
  result +=  "</div>";
  return result;
}

//Stores the age into a cookie
function taseavStoreAge(){
  var month = jQuery('#taseav-age-verify input[name="month"]').val();
  var day = jQuery('#taseav-age-verify input[name="day"]').val();
  var year = jQuery('#taseav-age-verify input[name="year"]').val();
  if(month < 10){
    month = "0" + month;
  }
  if(day < 10){
    day = "0" + day;
  }
  var result = "taseavdob=" + year + "-" + month + "-" + day;
  document.cookie = result;
  taseavDebug('Age stored as a cookie. Value = ' + result);
}

function taseavGetAge() {
    taseavDebug('Evaluated Date of Birth: ' +taseavGetCookie('taseavdob'));
    var birthday = new Date(taseavGetCookie('taseavdob'));
    var ageDifMs = Date.now() - birthday.getTime();
    var ageDate = new Date(ageDifMs);
    return Math.abs(ageDate.getUTCFullYear() - 1970);
}

function taseavIsAboveAge(ageToCheck){
  if(!ageToCheck){
    taseavDebug('Getting minimum age to check...')
    ageToCheck = taseavData.minAge;
    taseavDebug('Age to check: ' + taseavData.minAge);
  };
  taseavDebug('Getting evaluated age to check against...')
  var age = taseavGetAge();
  taseavDebug('Age checked: ' + age);
  if(age < ageToCheck){
    return false;
  }
  else{
    return true;
  }
}

function confirmAge(){
  if(taseavIsAboveAge() == false){
    taseavDebug('User is underage. Displaying message "' + taseavData.underageMessage + '"');
    alert(taseavData.underageMessage);
    if(taseavData.debug == true){
      alert(taseavDebugLog.join('\n \n'));
    }
    history.back();
  }
  else{
    taseavDebug('User is older than the min age of ' + taseavData.minAge +'. Removing age verify overlay.');
    jQuery('#taseav-age-verify').remove();
  }
}

jQuery(document).ready(function(){
    jQuery("html").append(taseavAgeForm());
    jQuery("#taseav-age-verify form").submit(function(e) {
      e.preventDefault();
    });
    //Disables mouse-wheel when gallery is open
    jQuery("#taseav-age-verify").bind("mousewheel", function() {
         return false;
    });
    jQuery('#taseav-age-verify').submit(function(){
      taseavStoreAge();
      confirmAge();
      taseavDebug(taseavData);
  });
})

.taseav-age-verify {
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0,0,0,0.9);
    top: 0;
    left: 0;
    z-index:9999;
}

.taseav-age-verify form {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width:600px;
    width:90%;
}

.taseav-age-verify input{
  width:calc(100% - 24px);
  padding:10px;
  border-radius:5px;
}

.taseav-age-verify div{
  margin-bottom:20px;
  max-width:100%;
  float:left;
}

.taseav-age-verify .taseav-month{
    width:24%;
}

.taseav-age-verify .taseav-day{
    width:24%;
}

.taseav-age-verify .taseav-year{
    width:50%;
}

.taseav-age-verify div:nth-of-type(2){
    margin-left:1%;
    margin-right:1%;
}

.taseav-age-verify input[type="submit"]{
    clear:both;
    width:100%;
}

.taseav-age-verify{
  color:white;
}

.taseav-age-verify label{
  color:white;
}

.taseav-age-verify h2{
  font-size:30px;
  text-align:center;
  color:white;
}

​

Answer 1

请将您的标签包装在您的输入周围，或者给输入一个id并在您的标签上使用"for“属性，其中值是输入的id。

这将帮助您解决焦点问题，并使您的表单可访问。

Answer 2

解决了。问题是，我在'html‘标签之后附加了代码，而不是'body’标记。

这是我最初拥有的：

jQuery("html").append(taseavAgeForm());

以下是我必须将其改为：

jQuery("body").append(taseavAgeForm());