运行Javascript onFocus - 更改DIV html文本

目前我正在尝试设置我的联系表单，以便在输入无效电子邮件时提供错误消息。当一个空白或不正确的电子邮件页面提交应做到以下几点：运行Javascript onFocus - 更改DIV html文本

会员注册文本更改为“重试”
红色文本输入字段中出现，说明“地址进入无效”

当用户关注输入字段，或按'重试';所有的表单元素都应该回到原来的状态。我已经能够使用onFocus方法将文本从红色变为黑色。我试图创建一个名为reset的小型javascript，我希望将DIV文本从“重试”更改回“注册”。

我确定我的问题是使用Javascript。有人能指引我朝着正确的方向吗？ :)

对于码参考： http://itsmontoya.com/work/playdeadcult/indextest.php

来源

2011-08-30 Josh

请在这里发表的相关代码。 – Cfreak

发布您的html，以及迄今为止您尝试创建的JavaScript。 –

那么你是否试图在用户关注文本输入时重置按钮标签以“注册”？ –

难道仅仅是你的重置（）函数，你需要什么帮助的注释块？如果是的话，你可以尝试它的jQuery的版本，因为你的jQuery加载反正=）

以下是你的重置（）函数，改变文字颜色为红色：

$('#email').val('').css('color', '#FF0000').css('font-size', '18px');

以下是您的blur（）函数将文本颜色更改为黑色。附加给你的电子邮件文本输入框，以及和你应该设置：

这样的

$('#email').blur().css('color', '#000000');

来源

2011-08-30 21:55:02

然后，您可以在必须重置的所有元素上使用相同的概念。我会推荐使用类，而不是这样做。管理和维护会更容易。 –

那么我最初试图重置更改电子邮件ID的风格，但我遇到了奇怪的问题。我决定在onFocus内宣布这些风格。我可以删除评论并将其更新为您建议的方法。 – Josh

好吧，我更新了重置脚本，并将onFocus更改为运行reset（）。现在我失去了文字从红色变回黑色的功能。我确定我要么称它错了，要么在声明重置函数时做了不正确的事情。 http://itsmontoya.com/work/playdeadcult/indextest.php是这些变化的实时链接:) – Josh

的一种方法是，用HTML：

<form action="" method="post"> 
    <fieldset> 
     <label for="emailAddress">Sign up for the newsletter</label> 
     <input type="text" id="emailAddress" name="email" /> 
     <button id="submitButton" type="submit">Submit</button> 
    </fieldset> 
</form>

和JavaScript：

var emailEntry = document.getElementById('emailAddress'); 
var button = document.getElementById('submitButton'); 
var defaultButtonText = button.innerHTML; 

emailEntry.onblur = function(){ 
    var val = this.value; 

    // the following IS NOT a valid test of email address validity 
    // it's for demo purposes ONLY 

    if (val.length < 5 && val.indexOf('@') == -1){ 
     button.innerHTML = 'retry'; 
     button.style.color = 'red'; 
    } 
    else { 
     button.innerHTML = defaultButtonText; 
     button.style.color = 'black'; 
    } 
}; 

button.onclick = function(){ 
    // prevent submission of the form if the email was found invalid 
    // and the innerHTML was therefore set to 'retry' 
    if (this.innerHTML == 'retry'){ 
     return false; 
    } 
};

JS Fiddle demo。

来源

2011-08-30 22:09:49

试试这个：

function validate() { 
    if($("#buttonDiv").html()== 'Retry') 
    { 
     // oops! They are trying to get back to where they were by 
     // re-clicking retry. Let's reset this thing 
     reset() 
     return false; 
    } 
    var emDiv = document.getElementById('email') // only look up once. 
    if(emDiv) { 
     // the space after the . should allow for 6 long 
     var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,6})$/; 
     var address = emDiv.value; 
     // good form issue -- never use == false. use ! 
     if(!reg.test(address)) { 
      emDiv.value = 'Address entered not valid'; 
      emDiv.style.color = '#bf4343'; 
      emDiv.style.fontSize = '12px'; 
      $("#buttonDiv").html('Retry'); 
      return false; 
     } 
    } 
}

来源

2011-08-30 22:12:57 cwallenpoole

所以它看起来好像是利用了重置JS I设置。我认为，尽管我写的方式可能有些问题。当我尝试运行它自己的时候，它不执行预期的结果:(。 – Josh

运行Javascript onFocus - 更改DIV html文本

回答

相关问题