javascript - IE11和基于Java的模态形式表现有趣

我在WordPress存储库中有一个名为Easy Age Verifier的WordPress插件，并且有一个support request让我感到困惑。这是他的信息：


  在Windows 10的Explorer 11上，无法填写字段。单击字段似乎会在字段下方的某个位置激活闪烁的文本行，并在其中输入数字不会执行任何操作。由于该网站正在开发中，因此无法包含链接。


我在测试环境上安装了Easy Beer Lister，whudduya知道吗？我得到同样的问题。

可以在repository中看到运行该插件的代码，但是我将继续在此处放置创建表单的代码副本。

还有其他人遇到过这个问题吗？如果是这样，您能否指出导致问题的原因以及如何解决？谢谢！

//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;
}

最佳答案

请在输入周围包裹标签，或为输入提供ID，然后在标签上使用“ for”属性，其中值是输入的ID。

这将帮助您解决焦点问题并使表格易于访问。