运行Javascript onFocus -改变DIV html文本
Running Javascript onFocus - Changing DIV html text
目前我正试图设置我的联系表单,以在输入无效电子邮件时给出错误消息。当提交了空白或错误的电子邮件时,页面应执行以下操作:
- 注册文本更改为"重试"
- 在输入字段中出现红色文本,表示"输入的地址无效"
当用户关注输入字段,或按下'重试'时;所有表单元素都应该返回到原始状态。我已经能够使用onFocus方法让文本从红色变为黑色。我试图创建一个名为reset的小javascript,我希望将DIV文本从"重试"更改为"注册"。
我确定我的问题是与Javascript。有人能给我指个正确的方向吗?:)
作为代码参考:http://itsmontoya.com/work/playdeadcult/indextest.php
一种方法是,使用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提琴演示
试试这个:
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;
}
}
}
它只是你的reset()函数的注释块你需要帮助吗?如果是这样,你可以尝试jQuery版本,因为你已经加载了jQuery =)
下面是reset()函数,它将文本颜色更改为红色:
$('#email').val('').css('color', '#FF0000').css('font-size', '18px');
下面是blur()函数,它将文本颜色更改为黑色。将此附加到您的电子邮件输入文本框中,您应该设置为:
$('#email').blur().css('color', '#000000');
相关文章:
- how to convert html <div> to pdf
- 在DIV中动态插入HTML并访问新元素
- jQuery获取子DIV的HTML内容
- 检查HTML是否已加载到DIV中
- HTML JS在DIV中附加随机图像
- HTML JavaScript Stay on Div on page reload
- 选择时使用jQuery克隆HTML DIV
- 在具有特定ID的DIV中使用JavaScript动态添加HTML元素
- 如何使用JavaScript添加动态HTML内容(DIV)
- 使用Javascript switch语句在DIV中显示HTML表
- Div/Class 中的 html 标记
- CSS 和 HTML:如何创建单击时展开的 DIV
- 刷新 Div 内容(仅限本地.html)
- Custom clipping path over HTML <div>
- DIV 的 HTML 长度不等于 AJAX 加载的 HTML 长度
- 如何为特定的 HTML Div 创建 dijit/Dialog,并使用 Div 的元素作为其内容
- 不带滚动条的DIV[HTML|CSS|JavaScript]
- 在DIV HTML中遍历或查找元素的最快方式
- 运行Javascript onFocus -改变DIV html文本
- 检查Div html是否有特定字符