javascript - IE11 和基于 Javascript 的模态表单表现有趣

Question

我有一个名为 Easy Age Verifier 的 WordPress 插件在 WordPress 存储库中得到一个 support request这让我很困惑。这是他的信息:

On Explorer 11 on Windows 10, the fields can't be filled in. Clicking in a field seems to activate a blinking text line somewhere way below the fields and typing numbers in does nothing. I can't include a link because the site is in development.

我在我的测试环境中安装了 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;
}

Answer 1

请将您的标签包裹在您的输入周围，或者为输入提供一个 id 并在您的标签上使用“for”属性，其中值是输入的 id。

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