我创建了一个简单的Web表单,其中包含一个文本框和一个按钮.我已经捕获了文本框的onblur事件.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
function onTextBoxBlur()
{
alert("On blur");
return true;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server" onblur="onTextBoxBlur();"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
</form>
</body>
</html>
当我在文本框中输入一些值并单击按钮时,会出现文本框的onblur事件,但按钮的onclick却没有.并且,当我从js函数中删除警报框时,它工作正常.按钮点击事件的一些方法将丢失.我认为这是由于警报框.知道为什么会这样吗？
我正在尝试使用onblur事件关闭窗口.它在IE,Firefox和Safari中运行良好,但事件不会在chrome中触发.是铬的错误或我的错误
在我的网站上,我有一个搜索框(文本输入字段).当用户点击它并开始键入文本时,会出现一个链接菜单.菜单通过JQuery显示 - 以下命令使菜单显示:
".focus(function() {
$("#instant_search_wrapper").show();
}); "
当用户点击搜索框时,我希望菜单消失.
最简单的方法是使用以下命令:
".blur(function() {
$("#instant_search_wrapper").hide();
});"
但是,如果我这样做,那么当用户点击菜单中的链接时,文本输入字段会失去焦点,因此菜单会在用户进入选择页面之前消失.当搜索字段失去焦点时,我怎样才能使菜单消失(但如果用户在搜索字段失去焦点之前点击链接,他/她仍然可以被带到链接)？
我正在实现一个 AJAX“自动建议”框：用户在输入文本字段中键入一个字符串，显示一个带有表格的隐藏 div，然后他/她可以单击一行或使用向上/向下箭头滚动列表; 同时，焦点仍然保持在输入文本字段上。
一切正常，但有一个细节我无法实现，这在概念上似乎很困难甚至不可能。当用户将光标移动到另一个输入字段时，我想隐藏建议列表，或者只是点击窗口的空白点。这本身并不难实现，我只是添加了一个回调OnBlur；但这打破了OnClick项目的选择，因为 onblur 事件在点击之前触发，然后 DIV 在 onclick 事件被触发之前消失......
我想过在整个窗口上实现一个onclick回调，然后检查点击发生的地方，但这似乎有点太尴尬和扭曲了。有人有更好的主意吗？谢谢！
我有一个 html 表，当一行失去焦点时，我试图使用 jJavascript 来触发一个事件，但“模糊”事件似乎不正确，因为没有触发任何事件：
（我正在做的事情的快速示例）
<tr class="tableRow">
<td class="tg-amwm" contentEditable="true">hours</td>
<td class="tg-amwm" contentEditable="true">minutes</td>
<td class="tg-amwm" contentEditable="true">hours</td>
<td class="tg-amwm" contentEditable="true">minutes</td>
</tr>
我正在使用以下内容：
var rows = document.getElementsByClassName("tableRow");
for(i = 0; i < rows.length; i++) {
rows[i].addEventListener("blur", function(){console.log("row left!");});
}
但控制台中没有任何内容 - 我是否误解了事件/DOM 结构？
我的反应选择有问题。当我在可搜索输入中输入一些文本并单击外部时，我的文本消失了。我尝试过onBlur={() => input.onBlur({value: input.value})}，它工作正常，但我在控制台中出现了丑陋的错误。就像是Uncaught ReferenceError: input is not defined。
onChangeValue = (newValue) => {
const inputValue = newValue.replace(/\W/g, '');
this.setState({ inputValue });
this.props.nameFilter(inputValue);
};
handleCloseMenu = () => {
this.setState(({
menuIsOpen: false,
}))
input.onBlur(input.value)
};
handleOpenMenu = () => {
this.setState(({
menuIsOpen: true,
}))
input.onBlur(input.value)
};
render() {
return (
<div className="container">
<AsyncSelect
className="search-input"
onFocus={this.handleOpenMenu}
onBlur={this.handleCloseMenu}
menuIsOpen={this.state.menuIsOpen}
loadOptions={this.loadOptions}
defaultOptions
onInputChange={this.onChangeValue}
placeholder="Search..."
/>
</div>
)};
};
有没有不使用 redux-form 的解决方法？
与这里相同的问题，但我没有使用 redux-form 并且这些解决方案不起作用。
我创建了一个 React View，比如说MyView，它有 2 个文本输入，其初始值将由从数据库读取的父级传递。
我还希望将更改后的值保存回数据库。因此，视图也传递了一个回调函数。
考虑到数据库保存操作很繁重，您不应该经常执行它。因此，我决定监听onBlur事件，而不是每次击键时调用的onChange输入框上的事件。onChange
第一种方法：
class MyView extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<input type="url" value={this.props.values.A}
onBlur={(evt)=>{this.props.saveValue('A', evt.target.value)}} />
<input type="url" value={this.props.values.B}
onBlur={(evt)=>{this.props.saveValue('B', evt.target.value)}} />
<button type="button" onClick={this.props.resetValues}>Reset</button>
</div>
);
}
}
但是，这不起作用，因为React强制受控输入（带有value属性）始终伴随onChange侦听器。
第二种方法：
因此，我尝试将这些输入设为uncontrolled. 也就是说，value使用 代替属性defaultValue。
<input type="url" defaultValue={this.props.values.A}
onBlur={(evt)=>{this.props.saveValue('A', evt.target.value)}} />
但这也不起作用，因为单击重置/清除按钮时，尽管视图已重新渲染，但defaultValue创建视图后不会更新。
第三种方法：
所以，我最终添加了一个onChange侦听器，但作为无操作。
<input …javascript onblur reactjs react-props getderivedstatefromprops
我有一个要求，我们希望用户解决输入字段错误，并且在完成之前不允许用户在屏幕上进行任何其他操作。
同样，我在输入字段和 onBlur 上实现了 HostListener，如果验证方案失败，我会将焦点设置回输入字段。
并且，我正在执行 e.preventDefault() 和 e.stopPropagtion() 来停止要在页面上执行的所有其他事件回调（在设置focus后，blur将是要执行的第一个事件）。
但不知何故，在任何外部事件上，blur确实会被执行，但不限制其他事件的执行。那些也正在执行，否则我将无法实现所需的功能。
import { Directive, HostListener, Input } from '@angular/core';
@Directive({
selector: '[appNumberFormat]'
})
export class NumberFormatDirective {
constructor() { }
@HostListener('blur', ['$event']) blur(evt) {
evt.preventDefault();
console.log('field focus...');
evt.target.focus();
return false;
// if (evt.target.value.trim() === '') {
// this.formControl.control.setValue(this.defaultValue);
// }
}
}
我在 stackBlitz 中复制了相同的场景。请看一看。
在 ECMAscript (=Javascript) 中有两种方法可以检查用户是否离开您的页面。您可以在 上侦听“ visibilitychange”事件，document也可以在 上侦听“ blur”和“ focus”事件window。它们之间有区别吗？
<TextInput
ref={ ref => this.mobileNumberRef = ref}
keyboardType='phone-pad'
returnKeyType='done'
onBlur={() => Keyboard.dismiss()}
/>
当触摸到该区域之外时，我想关闭键盘TextInput。但并onBlur()没有被解雇。
有人可以让我知道如何实现这一目标吗？谢谢你！
onblur ×10
javascript ×5
dom-events ×2
onfocus ×2
reactjs ×2
ajax ×1
angular ×1
autocomplete ×1
button ×1
hide ×1
jquery ×1
navigation ×1
onchange ×1
react-native ×1
react-props ×1
react-select ×1
redux ×1
textbox ×1