Question

我需要大力帮助，我已经在这段代码上工作了两天了。我有这个由javascript生成的表，用于确认用户输入。如果用户看到错误，他们可以单击该单元格，并使用户可以在那里编辑内容。如果用户的电子邮件有效或无效，我正在尝试设置它显示的位置。该脚本运行良好，但如果用户删除完整的电子邮件，则内容不再可编辑，这不会很好。到目前为止我的代码是：

HTML：

<table id = 'confirm'>
  <tr>
    <th>Email</th>
    <td id = 'tdEmail'>
      <div onkeyup = 'verifyEmail(this.parentNode.id)' contentEditable>
        abc@123.com
        <div id = 'validInvalid'>
          <span class = 'dgreen'> //Use to create a sort of green for valid email, when the user first sees the confirm table, the email is valid.
            <br/>Valid email!
          </span>
        </div>
      </div>
    </td>
  </tr>
</table>

JS：

function verifyEmail(id){
  var email = document.getElementById.firstChild.firstChild.nodeValue;
  var emailFilter = /^[^0-9][A-z0-9_]+([.][A-z0-9_]+)*[@][A-z0-9_]+([.][A-z0-9_]+)*[.][A-z]{2,4}$/;
  if(!emailFilter.test(email)){
    document.getElementById("validInvalid").innerHTML = "<span class = 'red'><br/>Not a valid email!</span>";
  }else{
    document.getElementById("validInvalid").innerHTML = "<span class = 'dgreen'><br/>Valid email!</span>";
  }
}

Answer 1

如果内容设置为''，您的div宽度会降低，这就是为什么您无法编辑内容的原因。解决问题的一种方法是为div提供固定的宽度。

您可以在下面看到修复： jsfiddle

Javascript验证用户输入

1 个答案: