$(input).blur() & $(input).focusout
$(input).blur() & $(input).focusout
我有下一个html表单:
<form role="form" action="MAILTO:alejandro@distal.com.ar " method="post" enctype="text/plain" id="form-contacto">
<div class="row">
<div id="form-column" class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-sm-push-3 col-md-push-3 col-lg-push-3">
<div class="form-group">
<label for="name" class="sr-only">Nombre:</label>
<input type="textbox" placeholder="ingrese su nombre" name="name" id="name" class="form-control">
<div id="nameRequiredError" class="alert alert-danger" role="alert">El nombre es obligatorio.</div>
<div id="nameFormatError" class="alert alert-danger" role="alert">Solo se permiten letras y puntos.</div>
</div>
<div class="form-group">
<label for="email" class="sr-only">Correo electrónico</label>
<input type="email" placeholder="ingrese su correo electrónico" name="name" id="email" class="form-control">
<div id="emailRequiredError" class="alert alert-danger" role="alert">El dirección de correo electrónico es obligatoria.</div>
<div id="emailFormatError" class="alert alert-danger" role="alert">Ingrese un correo electrónico válido.</div>
</div>
<div class="form-group">
<label for="message" class="sr-only"></label>
<textarea name="" id="message" cols="30" rows="10" class="form-control" placeholder="Escriba su mensaje..." sizable="false"></textarea>
<div id="messageRequiredError" class="alert alert-danger" role="alert">Ingrese un mensaje para enviar.</div>
<div id="messageFormatError" class="alert alert-danger" role="alert">El mensaje no tiene nigún caracter alfanum&eactue;rico.</div>
</div>
</div>
</div>
<div class="row">
<div id="form-column" class="col-xs-6 col-sm-3 col-md-3 col-lg-3 col-xs-push-6 col-sm-push-6 col-md-push-6 col-lg-push-6">
<submit class="btn btn-primary form-control"> Enviar >> </submit>
</div>
</div>
</form>
我想在输入失去焦点时验证数据输入,但我还没有抓住焦点。我尝试了所有这些:
$('#name').blur(function(event) {
alert("blur");
});
$('#name').focusout(function(event) {
alert("focusout");
});
// $('#name').live('focusout', function(){
// alert("live(focusout)");
// });
// $('#name').live('blur', function(){
// alert("live(blur)");
// });
$('#name').trigger('focusout', function(){
alert("trigger(focusout)");
});
$('#name').trigger('blur', function(){
alert("trigger(blur)");
});
$('#name').on('focusout', function(){
alert("on(focusout)");
});
$('#name').on('blur', function(){
alert("on(blur)");
});
但这些都不起作用,知道为什么吗?我疯了!感谢所有读到这篇文章的人!
您的代码在JS Fiddle中运行良好http://jsfiddle.net/dfkg7dha/2/
但是,请尝试在ready
函数中添加事件处理程序。一旦DOM准备好执行JavaScript,这里的代码就会运行。
$(document).ready(function () {
$('#name').blur(function(event) {
alert("blur: perform validation here");
});
});
同时为了保持理智,请确保页面上引用了JQuery JavaScript。
http://jsfiddle.net/znty7yoy/1/
这里的所有内容都应该有效,但我认为您缺少了一件事——在您尝试查询DOM之前,DOM还没有准备好
检查fiddle-如果HTML之前的脚本-这不会起作用,如果之后-它会起作用。
为了防止这种情况,只需使用
$(function () {
$('#name')....
}
没有jquery,你可以这样做:
var nameEl = document.getElementById("name");
nameEl.addEventListener("blur", function(){
alert("blurry");
});
代码链接:http://codepen.io/sp90/pen/RWpXBQ
相关文章:
- JQuery合并了keyup和focusout两个函数
- 正在将base64 jpeg从input-type=file上传到服务器
- 如何使用input-tage上传图片并查看在laravel中上传的文件预览
- $(input[]).仅在firefox中出现每个抛出语法错误
- 我如何在INPUT TEXT中使用这个Javascript和jQuery
- 如何使用keyup或input进行操作?javascript(jQuery)
- 未捕获错误:语法错误,无法识别的表达式:input[@type=submit]
- 无法使用 $('input[name=“rate”]').focus() 聚焦文本框;方法
- getDocument by id/get input text from button dons'不起作用
- 选中复选框时,DOM不显示element.input.checked和ng
- $(e.target).find和template.find('input').value之间有什么区别
- Jquery.focusout无法在移动设备上工作(slicknav)
- 单击表单的“提交”按钮时,获取表单中的所有INPUT和ACTION标记
- 当绑定到Date()-对象时,如何格式化input[time]的值
- AngularJS:如何访问自定义指令中的input[date]min属性
- $(input).blur() & $(input).focusout
- 表单元素上的jQuery focusout事件即使在单击子元素时也会被触发
- 如何从输入(focusout)触发花式框
- $('input')返回为空
- JS在input标签上使用keyup事件进行搜索