onchange 相关问题

基本上，我的下拉菜单如下所示： 0 1 2 基本上，我的下拉菜单如下所示： <select> <option>0</option> <option selected="selected">1</option> <option>2</option> <option>3</option> </select> 我正在尝试编写一个即使您选择相同选项也会触发的函数，即即使打开下拉列表并重新选择所选选项，我也希望它执行该函数。如果您想用鼠标选择，则可以使用mouseup。但是，当选择框打开时它也会触发，因此您需要跟踪它被触发的次数（偶数：选择正在打开，奇数：选择正在关闭）：http： //jsfiddle.net/T4yUm/2/. $("select").mouseup(function() { var open = $(this).data("isopen"); if(open) { alert(1); } $(this).data("isopen", !open); }); pimvdb 的答案对我有很大帮助，但我添加了一些额外的位来处理键盘激活和远离选择的导航： $('select').mouseup(... as in pimvdb... ) .blur(function() { $(this).data('isopen', false); }).keyup(function(ev) { if (ev.keyCode == 13) alert(1); }); 模糊处理程序处理在下拉列表打开时离开选择的情况，键盘处理程序处理当您使用键盘更改选择的值时的情况。其行为是，当用户单击“返回”导航离开时，才被认为最终选择了该值。如果您想要键盘有不同的行为，那应该不难做到。 select 并不意味着以这种方式使用 - 在大多数情况下，您可以使用一些技巧来获得这种行为，例如跟踪 select 上的鼠标和键盘事件，但不能保证它们会保留工作，或在每个平台上工作。我建议... 在更改时将 select 重置为其默认值，并使用其他一些文本来指示“选择”哪个，或者使用select以外的控件。您能更详细地描述一下最终目标吗？另一种方法是使用 .blur() 事件 -- http://jsfiddle.net/VKZb2/4/ 专业版无论哪种方式都会触发。 Con 仅当控件失去焦点时才会触发。我遇到了同样的问题。我刚刚向选项标签添加了单击事件并更改了选择的值： $("#select option").mouseup(function() { $(this).parent().val($(this).attr("value")); // do something. }); 注意：这不适用于 iPhone 或 iPad 设备。尝试以下解决方案。它会导致通过鼠标单击或 Esc 键失去焦点。 // whether or not dropdown is opened var open = false; $("#selectElement").on("click", function() { open = !open; if (!open) { console.log("option has been selected/re-selected"); } }); // update dropdown state upon loss of focus $("#selectElement").on("blur", function() { if(open){ open = !open; } }); // update dropdown state upon Esc key of focus $(document).keyup(function(e) { if (e.keyCode == 27) { if(open){ open = !open; } } }); 这是适用于所有场景的解决方案，这依赖于用户单击选项时发生的 onclick。只需添加先前选择的变量来跟踪新选择是否与先前选择相同 function App() { const componentRef = useRef(null); const selectClickHandle = (event) => { if (componentRef.current) { const rect = componentRef.current.getBoundingClientRect(); const { clientX, clientY } = event; const isInComponent = clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom; console.log(isInComponent); if (isInComponent == false) { // this gets triggered if a option is selected, regardless if // new selected is same as prev or not. // write your logic here, } } } return ( <div className="App"> <div id="outer-container" > <select id="fruit" name="fruit" ref={componentRef} onClick={selectClickHandle} > <option value="apple" >Apple</option> <option value="banana">Banana</option> <option value="grape">Grape</option> </select> </div> ); } export default App; 我还写了一篇关于它的文章，这是一个略有不同的主题，但我认为这将有助于解释。 https://medium.com/@ijlal.tanveer294/how-to-know-if-a-select-dropdown-is-open-555a304e7dda

javascript jquery html onchange

回答 0 投票 0

如何在 Odoo 17 中按州划分地区？

在odoo中，我有2个字段：state_id和district_id。本质上，我想选择一个州，那么在选择一个地区时，它只会显示属于该州的地区。我经常这样做...

python xml onchange erp odoo-17

回答 1 投票 0

检测表单中所有元素的事件

如何对所有表单元素使用更改或类似事件？我不想分别对每个字段使用更改。

javascript html forms events onchange

回答 2 投票 0

Django - 在 onchange 事件上获取表单文本输入的值

我使用它通过 onchange 事件获取 django 表单中所选项目的 ID 和值：类 forms_bdc(forms.ModelForm): [...] bdc_description_1 = forms.ModelChoiceField( wid...

django forms onchange textinput

回答 1 投票 0

Django - 如果使用 jquery-editable-select，选择 onchange 事件将不再工作

我正在使用 django 模型中的选择项和 onchange 事件来触发 JS 脚本：表格.py 类 forms_bdc(forms.ModelForm): [...] bdc_description_1 = forms.ModelChoiceField(queryset=

jquery django select onchange html-datalist

回答 1 投票 0

Next JS 中的 BlockNote OnChange 问题

输入“/”后，每次我尝试输入某些内容时，组件都会重新渲染，从而使其无法使用。文件A： const update = useMutation(api.documents.updateDocument); 常量 C...

next.js onchange rich-text-editor rerender tiptap

回答 2 投票 0

无法在文本字段中连续输入字符，因为它在组件中呈现为单独的功能

我想用下面的方法绑定文本字段，但当我在文本字段中输入字符时遇到问题。对于第一个字符，它工作正常，但是当我输入第二个字符时，控制/焦点就会出现......

javascript reactjs material-ui textfield onchange

回答 1 投票 0

如何检测表单中所有元素上的事件？

如何对所有表单元素使用更改或类似事件？我不想分别对每个字段使用更改。

javascript html forms events onchange

回答 2 投票 0

HTML表单：整个表单更改事件

如何对所有表单元素使用更改或类似事件？我不想分别对每个字段使用更改。

javascript html forms events onchange

回答 2 投票 0

onChange 函数是如何做到的？

在这里，下面我给出了一个 React 项目的代码，我正在努力理解它是如何工作的。 main.jsx 文件代码从“反应”导入反应；从“react-dom/

javascript reactjs onchange react-context typechecking

回答 1 投票 0

将单个 onChange 应用于所有输入框

我遇到的一个例子：我最近遇到了以下例子：激活（事件）{ console.log(event.target.value); } 使成为（） { 返回（我遇到的一个例子：我最近遇到了以下例子： activate(event) { console.log(event.target.value); } render() { return ( <div onChange={this.activate.bind(this)}> <input type="radio" value="yes" name="confirm"/> Yes <input type="radio" value="no" name="confirm"/> No </div> ) } 这允许将 onChange 处理程序应用于单选按钮的父 div，而不是应用于每个单独的单选按钮。我对此的疑问：是否有任何原因将 onChange 属性专门应用于一组单选按钮而不应用于其他表单元素组？为什么不将所有表单字段放在单个 div 或表单元素中并且只有一个 onChange 属性？这是ReactJS特有的，还是可以在基本的JavaScript中完成类似的事情？ 1。是否有任何原因导致 onChange 属性专门应用于一组单选按钮而不应用于其他表单元素组？不，没有理由不能将其应用于其他表单元素甚至 DOM 的根元素。所有事件都从根到目标（捕获阶段），然后回到根（冒泡阶段）。编写事件处理程序时必须牢记这一点。有关事件冒泡的更多信息，请参阅 this SO thread。 2。为什么不将所有表单字段放在单个 div 或表单元素中并且只有一个 onChange 属性？对于普通 JS 来说，这通常是正确的。然而，React 实现了自己的事件系统，他们建议的方式似乎是创建一个事件监听器，然后将每个输入链接到它。 <form onSubmit={handleSubmit}> <input type="text" onChange={handleChange} /> <input type="text" onChange={handleChange} /> <input type="text" onChange={handleChange} /> </form> 无论是否使用事件冒泡，handleChange函数都会使用event.target.value，但React似乎更喜欢将函数显式附加到每个输入元素。如果不这样做，当您尝试设置默认值时，通常会遇到警告：（默认值也是常见的混乱来源，更多信息此处）这只是一个警告。此警告已成为 Github 存储库上大规模讨论的主题，更多讨论如下。 3.这是 ReactJS 特有的，还是可以在基本 JavaScript 中完成类似的操作？如前所述，这不是特定于 React 的，它实际上更特定于 JS。 React 似乎对此不可知。他们似乎更喜欢您向每个输入元素添加 onChange 引用，而不是以这种方式使用冒泡。什么是正确的方法？我不知道。我认为这取决于您更喜欢什么，或者情况需要什么。在 Github 存储库上的大型讨论中，大多数人都会遇到警告，因为使用事件冒泡通常是在 vanilla JS 中鼓励作为“最佳实践”的方式。不过，也有声音说：这是我的观点，但我想说这是相反的，这是一个坏主意。它依赖于 React 层次结构之外的冒泡。评论链接因此，取决于你问的是谁，使用事件冒泡可能会被认为违背了 React 思维的趋势。这将取决于您选择如何构建应用程序。重要的是要注意，它没有没有真正的问题，一切都有效。无论您是否使用事件冒泡。在这个问题中，主要的抱怨似乎可以归结为这样一个事实：控制台上充满了警告，并且没有优雅的方法来关闭它们。最好的方法似乎是只为输入元素分配一个空函数。我不是 React 专业人士，但我可以说几句话：您可以在每种类型的输入上放置 onChange，它适用于选择、文本、复选框。最好直接在输入本身上使用 onChange 或任何侦听器，为什么？因为在此函数中，您可以轻松地使用“事件”参数引用您的输入，如下所示：函数handleChange（事件）{ var value = event.target.value; } 如果你不这样做，你就必须参考正确的输入，这可能真的很混乱。我知道的最短且效果很好： handleInputChange = ({ target: { name, value } }) => { this.setState({ [name]: value }) } 请记住：您需要将 name="name" 属性添加到输入标签中，您还需要有该州的通讯名称。检查此片段并使用它添加更多文本字段（这很神奇）： class SingleHandler extends React.Component { state = { title: '', description: '' } handleInputChange = ({target: { name, value }}) => { this.setState({ [name]: value }); } render() { return ( <div> <label htmlFor="title">title: {this.state.title}</label> <input type="text" name="title" value={this.state.title} onChange={this.handleInputChange} /> <label htmlFor="description">description: {this.state.description}</label> <input type="text" name="description" value={this.state.description} onChange={this.handleInputChange} /> </div> ); } } ReactDOM.render(<SingleHandler />, document.body); input, label { display: block; width: 80%; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 来源： https://reactjs.org/docs/forms.html（在这里您会找到一个也适用于不同类型输入的版本） https://medium.com/@tmkelly28/handling-multiple-form-inputs-in-react-c5eb83755d15（也很棒的资源） activate(event) { console.log(event.target.value); } render() { return ( <div> { ["yes","no"].map((item,i)=>( <> <input key={i} type="radio" value={item} name="confirm" onChange={(e)=>activate(e)}/> {item} </> )) } </div> ) } 您可以创建一个函数来呈现一种类型的输入框，包括任何 javascript“on”事件，例如输入类型文本： renderInputText(title, name){ return ( <div className="form-group"> <label>{title}</label> <input type="text" name={name} className="form-control" placeholder={"Enter " + title} value={this.state.detail[name]} onChange={this.onChangeHandler} onFocus={this.onChangeHandler}/> </div> ); } 然后你可以从你的 html 表单中调用它： <div class="form"> {this.renderInputText('Title', 'title')} {this.renderInputText('Name', 'name')} {this.renderInputText('Phone', 'phone')} etc... </div>

reactjs onchange

回答 5 投票 0

onchange 相关问题

最新问题