1

私は大きな助けが必要です、私はこのコードを2日間使っています。このテーブルは、ユーザー入力を確認するために使用される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の幅が狭くなるため、コンテンツが1つの方法に設定されている場合、コンテンツを編集できません''。問題を解決するには、divに固定の幅を指定します。

あなたは以下の修正を見ることができます： jsfiddle

于 2013-02-14T15:59:33.627 に答える