1

我需要重大帮助，我已经使用此代码两天了。我有这张由 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>";
  }
}
4

1 回答 1

1

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

你可以看到下面的修复： jsfiddle

于 2013-02-14T15:59:33.627 回答