我发现当连接到窗口,文档或正文时,javascript焦点和模糊事件在Android浏览器上无法正确触发.
我想要一个在桌面浏览器上正常工作的简单测试脚本,但在Android股票浏览器,Dolphin和Opera mobile上都失败了:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<title>Focus test</title>
<script type="text/javascript">
window.onfocus = function() {
document.getElementById('console').innerHTML += '<div>Focus event handler fired.</div>';
};
window.onblur = function() {
document.getElementById('console').innerHTML += '<div>Blur event handler fired.</div>';
};
</script>
</head>
<body>
<input id="test" name="test" />
<div id="console"></div>
</body>
</html>
有趣的是,如果表单输入正在获得焦点,则事件处理程序将触发,并且在模糊时,模糊事件处理程序将触发两次.
有没有人有一个很好的解决方案或解决方法？
编辑:预期的结果是,如果我更改浏览器选项卡,或更改为另一个应用程序,模糊事件应该触发,如果我回到浏览器选项卡,焦点事件应该触发(这是它在桌面上的工作原理) )
我希望在切换时在我的iOS应用中使用模糊效果.像PayPal和其他一些需要隐藏信息的金融应用程序.但我找不到有关此功能的任何信息或提示.
例如PayPal实现:http://40.media.tumblr.com/0334b065e28dfe2e325d32822d87246b/tumblr_mwcl35TZIt1qea4hso1_1280.jpg
我有问题隐藏某些基于div的弹出窗口.当我点击那些他们不隐藏的div.这是我正在做的示例代码..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../JS/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#MainCanvas div").blur(function()
{
alert("blured");
});
});
</script>
</head>
<body>
<div id="MainCanvas" style="width: 400px; height: 350px; border: solid 1px black;">
<div class="ui-widget-content" style=" vertical-align:middle; height:60px; border: solid 2px black; width:300px;">
Drag me around
</div>
</div>
</body>
</html>
$('#lPass').focus(function() {
if (this.value == this.defaultValue) this.value = '';
$(this).after('<input type="password" id="lPass" size="10" value="'+this.value+'"/>').remove();
}).blur(function() {
alert(1);
});
<input id="lPass" type="text" size="10" value="Password"/>
onblur不工作.
有任何想法吗？
好的,今天我正在制作一个帮助HTML功能.它看起来像这样:
function Input($name,$type,$lable,$value= null){
if (isset($value)) {
//if (this.value=='search') this.value = ''
echo '<label for="'. $name .'">'. $lable .'</label><input type="'.$type.'" name="'. $name .'" id="'. $name .'" value="'.$value.'" onfocus="if (this.value==\''.$value.'\') this.value = \'\' "/>';
}
if (!isset($value)) {
echo '<label for="'. $name .'">'. $lable .'</label><input type="'.$type.'" name="'. $name .'" id="'. $name .'" />';
}
}
如您所见,如果您插入一个值,它将执行一些JavaScript,以便当我单击该框时,框内的文本将消失,
问题:当我们没有输入时,我们如何才能使它具有价值？(请查看stackoverflow上的搜索框,但是我们没有指向输入框后,stackoverflow上的搜索框没有回来？也许是通过使用onblur？我是对的吗？
希望你明白我的意思.
好吧因为有些人没有得到我的意思,请看
当我没有点击它.
alt text http://img39.imageshack.us/img39/4128/48048759.png
当我点击它.
alt text http://img691.imageshack.us/img691/4485/94918020.png
当我不再点击它.
alt text http://img691.imageshack.us/img691/4485/94918020.png
它应该是
当我没有点击它.
alt text http://img39.imageshack.us/img39/4128/48048759.png
当我点击它.
alt text http://img691.imageshack.us/img691/4485/94918020.png …
通过以下代码,我希望仅在onblur事件不是由于提交按钮上的"ONCLICK"引起时,才会在元素id ="eg1"的"ONBLUR"上"DO SOMETHING".
$(document).ready(function() {
$('#eg1').blur(function() {
if(!($("#SubmitBut").click())) {
//do something
}
});
});
对于Eg:如果用户更改"eg1"文本字段的值并单击下一个文本字段,则必须运行DO SOMETHING代码,但是如果用户更改"eg1"字段的值,然后单击SUBMIT按钮,然后DO SOMETHING代码不能运行.
这是正确的方法吗？请指导.
当用户在桌面上切换标签时,我正试图从(jQuery Mobile)文本输入中删除焦点.虽然我可以在下面的控制台中正确识别activeElement,但我无法编辑其任何属性或删除其焦点.
这就是我正在做的事情:
// inside some init method
window.onfocus = function () {
// triggers
console.log(document.activeElement);
if (document.activeElement.tagName !== "BODY") {
console.log("clear focus");
document.activeElement.blur();
document.activeElement.className = "FOOBAR";
}
};
当我在一个表单上并聚焦文本输入时,然后切换到另一个选项卡并返回到带有表单的选项卡,事件侦听器触发并且我的仍然活动的输入被正确记录.然而就是这样......我无法模糊或编辑任何元素属性.
问题:
如何正确地从活动元素中移除焦点window.onfocus或window.onblur？
谢谢!
PS:它也不适用于jQuery:
$(window).on("focus", function () {
$(document.activeElement).blur();
});
我正在寻找一个只有JavaScript的解决方案.
编辑:
document.activeElement.blur()从控制台工作正常,但不是从我的听众.
我想在firefox上使用带有html输入(type = number)元素的ng-blur .
我发现的问题是,当使用输入数字的向上和向下箭头时,模糊和焦点事件都不会被firefox触发,而chrome工作正常.
您可以在http://jsfiddle.net/chonw54e/重现该问题
<div ng-app ng-init="focus=false;blur=false;active=false">
<input type="number" ng-class="{ myFocus: focus, myBlur: blur }" ng-focus="focus=true;blur=false;" ng-blur="blur=true;focus=false;">
<p>focus: {{focus}}</p>
<p>blur: {{blur}} </p>
</div>
只需加载页面(同时使用firefox和chrome),然后单击html输入编号的上/下箭头
我究竟做错了什么？
谢谢您的帮助!
编辑: 11/12/2015
@ Arg0n的解决方案解决了这个问题.但是,它看起来像firefox或angularjs的问题.
我刚刚创建的角GitHub上的问题在这里
这不是一个有角度的问题.这是由于firefox的事件行为在单击输入内的箭头时没有聚焦输入(在我看来这是一个错误).
编辑:14/12/2015
在bugzilla中创建的Firefox问题:https://bugzilla.mozilla.org/show_bug.cgi ？ id = 1232233
当用户将焦点移离字段时,我想将JSF inputText字段设置为大写字母.最好是使用f:ajax标签执行此操作并让blur事件触发对服务器的调用来执行大写,或者最好是在JavaScript中执行此操作吗？会是什么原因,是不是在JavaScript中做到这一点？使用ajax调用服务器端总是做这些事情是最好的吗？
//假设我改变state的handleChange功能。
在onChange事件状态的情况下将更新每个字符更改。
<input
type="text"
name="name"
onChange={this.handleChange}
id="name"
/>
如果onBlur事件状态将在离开输入字段后单次更新。
<input
type="text"
name="name"
onBlur={this.handleChange}
id="name"
/>
哪种方法最适合更新statein React，为什么？