Question

我在jQuery中编写了一些代码，用于删除/替换焦点和模糊事件上的电子邮件字段的默认值。它'工作正常，

但是我想在JavaScript中使用它...我已经尝试了好几次但是我没能成功。

这是我的jQuery代码

    $(document).ready(function(){
    var email = 'Enter E-Mail Address....';
    $('input[type="email"]').attr('value',email).focus(function(){
        if($(this).val()==email){
            $(this).attr('value','');
        }
    }).blur(function(){
        if($(this).val()==''){
            $(this).attr('value',email);
        }
    }); 
});

任何人都可以告诉我如何在JavaScript中执行此操作，

Answer 1

假设<input type='text' id="email_field"/>

var email = 'Enter E-Mail Address....';
var emailField = document.getElementById("email_field");
emailField.onfocus = function(){
  removeDefaultText(this);
}
emailField.onblur = function(){
  setDefaultText(this);
}

function removeDefaultText(element){
  var defaultValue = 'Enter E-Mail Address....';
  if(element.value == defaultValue){
    element.value = "";
  }
}

function setDefaultText(element){
  var defaultValue = 'Enter E-Mail Address....';
  if(element.value == ''){
    element.value = defaultValue;
  }
}

Answer 2

试

function validEmail(e) {
    var filter = /^\s*[\w\-\+_]+(\.[\w\-\+_]+)*\@[\w\-\+_]+\.[\w\-\+_]+(\.[\w\-\+_]+)*\s*$/;
    return String(e).search (filter) != -1;
}

使用jQuery

var userinputmail= $(this).val();
var pattern = /^\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b$/i

if(!pattern.test(userinputmail))
{
  alert('not a valid e-mail ');
}

您还可以尝试使用以下正则表达式进行其他验证（我认为这会有所帮助）

匹配用户名=＆gt; /^[a-z0-9_-]{3,16}$/
匹配密码=＆gt; /^[a-z0-9_-]{6,18}$/
匹配网址=＆gt; /^[a-z0-9_-]{6,18}$/

Answer 3

显然，当没有其他值时，您正在尝试显示占位符值。

在任何现代浏览器中，您可能只是使用它：

<input type="text" class="email" placeholder="Enter E-Mail Address..." />

不幸的是，排除了较旧的IE，因此对于vanilla JavaScript的方法可能是这样的：

// grab all input[type="email"] elements
var emailFields = document.getElementsByTagName('INPUT').filter(function(input) {
  return input.type === 'email';
});

var placeholder = 'Enter your E-Mail Address...';
// watch onfocus and onblur on each of them
emailFields.forEach(function(input) {
  input.onfocus = function() {
    // clear only if the value is our placeholder
    if (input.value === placeholder) {
      input.value = '';
    }
  }

  input.onblur = function() {
    // set the value back to the placeholder, if it's empty
    if (input.value === '') {
      input.value = placeholder;
    }
  }
});

希望符合您的需求。

Answer 4

您可以使用常规的旧javascript：

function IsEmail(email) {
  var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(email);
}

==

使用新的正则表达式
演示 http://bit.ly/Hzbq4i
添加了对Address tags（+号）

function isValidEmailAddress(emailAddress) {
    var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
    return pattern.test(emailAddress);
};

if( !isValidEmailAddress( emailaddress ) ) { /* do stuff here */ }

注意： keep in mind that no 100% regex   电子邮件检查存在！

检查此link

使用纯JavaScript交换默认字段值

4 个答案: