event-handling 相关问题

有没有办法用Javascript找到元素的事件处理程序？

假设你有这个div： 酒吧 你这样做： $("#foo").click(someFunction); Javascript 代码中的某处。 页面加载后...

如何更改点击事件的按钮颜色？

在ms-window应用程序上，我希望更新按钮样式“on-click”事件，并将其恢复为原始样式“on-release”。我至少测试了这两种方式，都开不到...

更好地处理Promise.race

尝试为绘图工具编写流程逻辑，用户可以在其中输入键盘输入以在卡瓦斯上绘图，比方说，为了实现此目的，我尝试以删除事件侦听器的方式链接事件侦听器

通过下拉选择应用奖励，当选择不同的选项时奖励消失

我正在尝试构建一个导出 DnD 5e 字符表的 React 应用程序。根据您选择的种族/物种，有不同的奖励。我有一个下拉菜单可以选择您的比赛，我想申请...

在React js中的TextField中放置长度约束

我正在接受卡号用户的输入，并希望用户输入的长度不得小于和大于12。这是我的文本字段的声明。 我正在接受卡号用户的输入，并希望用户输入的长度不得小于和大于12。这是我的文本字段的声明。 <TextField id="SigninTextfield" label="Aadhaar number" id="Aadhar" lineDirection="center" required={true} type="number" maxLength={12} style={styles.rootstyle} erorText="Please enter only 12 digits number" /> 现在我不明白是否使用javascript或任何事件处理程序来限制长度。 您可以设置 maxLength 属性来限制文本框中的文本。 您可以将 onChange 传递给 maxLength inputProps 的 material-ui（小写 i，而不是 InputProps）属性，而不是 TextField 方法。 <TextField required id="required" label="Required" defaultValue="Hello World" inputProps={{ maxLength: 12 }} /> 基本上我们可以通过 inputProps 对象编辑所有输入元素的本机属性。 链接到TextField Api 我找到了另一个解决方案这里。 <TextField required id="required" label="Required" defaultValue="Hello World" onInput = {(e) =>{ e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,12) }}/> <TextField autoFocus={true} name="name" onChange={handleChange} placeholder="placeholder" id="filled-basic" variant="filled" size="small" fullWidth inputProps={{ maxLength: 25, }} InputProps={{ startAdornment: ( <InputAdornment position="start"> <SearchIcon /> </InputAdornment> ), }} /> <TextField id="username" name="username" label={translate('username')} onChange={handleChange} onBlur={handleBlur} value={values.username} error={Boolean(errors.username) && touched.username} helperText={(errors.username && touched.username && translate(errors.username))} required inputProps={{maxLength :20}} /> 值得注意的是，Material-ui <TextField /> 组件没有 maxlength 属性。然而，原始的 html <input> 确实如此。因此，您实际上不需要创建任何额外的函数来使其正常工作。只需使用基本 <input> 属性即可使用 inputProps。 实际答案是这样的： inputProps={ {maxLength: 22} } // Result => <input maxlength="yourvalue" /> 它的作用是设置底层 maxlength 的 <input> 属性，结果是：<input maxlength="yourvalue" />。这里要注意的另一个重要事项是您使用 inputProps 而不是 InputProps。您的目标是小写字母 inputProps。 如果您使用的是 MUI 5 版本 5.0.6，由于对旧版本的支持，您将必须执行以下操作， <TextField id="standard-textarea" label="A label" placeholder="Some text here" multiline variant="standard" defaultValue={"Hello"} inputProps={{ maxLength: 255, }} InputProps={{ disableUnderline: true, }} /> TextField同时支持inputProps和InputProps，但有些属性反之则不起作用。 maxLength 在 InputProps 中无法按预期工作，并且 MUI 5 的 disableUnderline 等属性在 inputProps 中无法按预期工作。 小心可能的 typo 与 i。 请参阅 API 了解更多信息，https://mui.com/api/text-field/。 我发现 Material UI 中 TextField 和 Input 之间的行为有些奇怪 它们彼此非常相似，我看到的问题如下： 在 TextField 组件上，如果您使用大写 "I" 的 InputProps，则会显示装饰，但另一方面，如果您将其用作小写“inputProps”，则 maxLength Html 属性将被视为 valid ，但不是 adorments 我最终使用 INPUT 而不是 TextField，所以你可以在 中使用 adorments <TextField variant="outlined" required fullWidth error={errors.email} id="email" label={t("signup-page.label-email")} name="email" onChange={handleChange} inputProps={{ endAdornment: ( <InputAdornment position="end"> <IconButton aria-label="toggle password visibility"> <EmailIcon /> </IconButton> </InputAdornment> ), maxLength: 120, }} /> 在上面的代码中，adorment被忽略，但是maxLength被用作“inputProps”驼峰式大小写 下面的代码是一个工作示例，正如您所看到的，我将其视为旧样式中的 Form Control、输入标签和输入“outlinedInput” <FormControl variant="outlined" fullWidth> <InputLabel htmlFor="firstName">Password</InputLabel> <OutlinedInput value={values.firstName} autoComplete="outlined" name="firstName" variant="outlined" required fullWidth error={errors.firstName} id="firstName" label={t("signup-page.label-firstname")} onChange={handleChange} autoFocus inputProps={{ maxLength: 32 }} /> </FormControl> 解决方案。我的最后建议，使用 OutlinedInput 而不是 TextField，这样你就可以分开放置 Adorments 和 maxLength 下面是一个带有 FormControl OutlinedInput、inputProps - maxLength 和结束 Adorment 图标 的工作示例 <FormControl variant="outlined" fullWidth> <InputLabel htmlFor="password">Password</InputLabel> <OutlinedInput value={values.passwordConfirm} variant="outlined" required fullWidth error={errors.passwordConfirm} name="passwordConfirm" label={t("signup-page.label-password-confirm")} type={values.showPasswordConfirm ? "text" : "password"} id="password-confirm" onChange={handleChange} inputProps= {{maxLength:32}} endAdornment= { <InputAdornment position="end"> <IconButton aria-label="toggle password visibility" onClick={handleClickShowPassword("passwordConfirm")} onMouseDown={handleMouseDownPassword} > {values.showPasswordConfirm ? ( <Visibility /> ) : ( <VisibilityOff /> )} </IconButton> </InputAdornment> } /> {errors.passwordConfirm && ( <p className="error"> {errors.passwordConfirm} </p> )} </FormControl> 接受的答案在 Firefox 中不适用于大数字（大于 16 位数字）。数字的行为方式很奇怪。 对于 22 长度的字段，我们最终使用了这个： <TextField required validateOnBlur field="cbu" label="22 dígitos del CBU" validate={validate.required} type="text" inputProps={ {maxLength: 22} } onInput={(e) => { e.target.value = e.target.value.replace(/[^0-9]/g, '') }} /> 基本上，文本字段的原生 maxLength 约束，加上“即时”从字符串到数字的转换。 改进 此外，您可能更喜欢使其可重用且更具语义。 # constraints.js const onlyNumbers = (e) => { e.target.value = e.target.value.replace(/[^0-9]/g, '') }; # form.js <TextField field="cbu" label="22 dígitos del CBU" inputProps={ {maxLength: 22} } onInput={(e) => onlyNumbers(e) } 材料设计 <TextField /> 组件没有任何 length 属性。 您可以使用 onChange() 方法创建您的。 updateTextField(event,value){ if(value.length <= 12){ //Update your state } else{ //Value length is biggest than 12 } } <TextField id="SigninTextfield" label="Aadhaar number" id="Aadhar" lineDirection="center" required={true} type="number" onChange={(e,v) => this.updateTextField(e,v)} style={styles.rootstyle} erorText="Please enter only 12 digits number" /> 在您的更改处理程序中，只需编写即可。 if (event.target.value.length !== maxLength ) return false; 我也遇到了类似的问题，但使用的是 TextareaAutosize。不幸的是， inputProps={{ maxLength: 12 }} 不适用于 TextareaAutosize。 以下解决方法适用于 TextareaAutosize 以及文本和数字。 受到此问题已接受答案的启发 - https://stackoverflow.com/a/49130234/5236534 onInput = {(e) =>{ e.target.value = (e.target.value).toString().slice(0,10) import * as React from 'react'; import TextareaAutosize from '@mui/material/TextareaAutosize'; export default function MinHeightTextarea() { return ( <TextareaAutosize aria-label="minimum height" minRows={3} placeholder="Minimum 3 rows" style={{ width: 200 }} onInput = {(e) =>{ e.target.value = (e.target.value).toString().slice(0,10) }} /> ); } 演示链接：限制 MUI TextareaAutosize 中的字符长度 <TextField id="SigninTextfield" label="Aadhaar number" id="Aadhar" lineDirection="center" required={true} type="number" inputProps={{ maxLength: 20, }} style={styles.rootstyle} erorText="Please enter only 12 digits number" /> 我们可以通过以下方式使用 inputProps 属性进行设置 import React from 'react' import { Autocomplete, TextField } from '@mui/material' export default function Select({ onChangeInput, label, name, value, options, placeholder, disabled, error, helpertext, required, shrink, maxLength }) { const _onChange = (e, v) => { onChangeInput(v) } return ( <Autocomplete freeSolo fullWidth={true} multiple={false} margin={'noraml'} readOnly={disabled} name={name} isOptionEqualToValue={(option, value) => option.label === value.label} value={value} options={options} placeholder={placeholder} renderInput={params => ( <TextField {...params} label={label} error={error} required={required} helperText={helpertext} variant={'standard'} inputProps={{ ...params.inputProps, maxLength: (maxLength && parseInt(maxLength)) || 99}} InputLabelProps={{ shrink: shrink, style: { fontSize: 18 } }} /> )} onInputChange={_onChange} /> ) } 对于仍在寻找数字字段解决方案的人来说，这个解决方案对我来说效果很好。 onInput={(e: any) => { e.target.value = Math.max(0, parseInt(e.target.value)) .toString() .slice(0, 2); }} 确保使用任意一个。 import * as React from "react"; import Box from "@mui/material/Box"; import TextField from "@mui/material/TextField"; export default function BasicTextFields() { const [num, setNum] = React.useState(); const limitChar = 12; const handleChange = (e) => { if (e.target.value.toString().length <= limitChar) { setNum(e.target.value); } }; return ( <Box component="form"> <TextField type="number" id="outlined-basic" label="Outlined" variant="outlined" onChange={(e) => handleChange(e)} defaultValue={num} value={num} /> </Box> ); } 其中很多答案现在已被弃用。推进 MUI 的新方法是使用 slotProps： return ( <TextField id={id} name={id} label={label} value={value} onChange={onChange} onBlur={onBlur} size={size} error={!!error} slotProps={{ htmlInput: { maxLength: 50 } }} {...props} /> );

React.js 服务器端渲染和事件处理程序

我正在学习使用react.js，但在使用事件处理程序时遇到一些问题。最后一个问题是：是否可以使用服务器端渲染并将事件处理程序发送到客户端自动...

将带有事件的函数从子组件传递到父组件

我有一个带有输入的子组件，我想使用道具在事件中传递信息。将数据发送到父组件的最佳方式是什么？ 在父组件中，我有函数和

skia中如何处理事件？

我打算使用skia作为应用程序。如何在 Skia 中处理 Web 输入框单击、滚轮事件等事件？滑雪场可能发生哪些事件？ 怎样处理skia中的事件？

在C++中，使用gtkmm-3.0，如何将XML文件中创建的小部件连接到函数

我正在学习C++，以及如何使用gtkmm（我正在使用gtkmm版本3.24）。我创建了一个简单的窗口，其中有几个小部件，但我无法将简单的事件与简单的函数连接起来。 米...

使用本机 Javascript 实现 jQuery 的“实时”活页夹

我试图弄清楚如何将事件绑定到动态创建的元素。即使元素被销毁并重新生成，我也需要事件持续存在于元素上。 显然是 jQuery 的 live

如何使用另一个自定义控件在自定义控件中初始化事件

大家好 我正在尝试创建一个自定义组合框。我创建了一个自定义下拉按钮并使用 is 作为下拉按钮。用户按下此按钮后，将打开一个面板，其中包含...

DevExpress 组件后代中未触发 OnKeyPress

下面的代码定义了一个 TcxDBBlobEdit 后代及其自己的 OnKeyPress。 我的问题是这个 OnKeyPress （“此处断点”）永远不会被触发。 我在忽略什么？ 类型 TPasswordTcxDBBlob...

更新动态更改以获取数据

我现在陷入困境。我创建了一个函数来控制使用毫秒到秒、分钟和小时的计算来获取数据的频率，这似乎工作正常。 这是...

监听子组件中的焦点事件 - 处理程序不捕获焦点事件

我正在使用 Angular 16 - 父组件消耗子组件 - 父组件如下 父组件.html 我正在使用 Angular 16 - 父组件消耗子组件 - 父组件如下 parent.component.html <app-gotoitem #initialFocusComponent (initialFocusNativeElementFocus)="focusHandler($event)"></app-gotostudent> parent.component.ts @ViewChildren('initialFocusComponent') initialFocusComponents: QueryList<any>; ... focusHandler(e) { console.log("do something"); } ... this.initialFocusComponents.first.setFocus(); 在我的子组件（gotoitem）中 child.component.ts @Output() initialFocusNativeElementFocus = new EventEmitter(); @ViewChild('initialFocus') initialFocus: ElementRef; ... fromEvent(this.initialFocus.nativeElement, 'focus') //(B) .pipe(take(1)) .subscribe(elem => { this.initialFocusNativeElementFocus.emit(); //(C) <--this doesn't get executed }); ... public setFocus(): void { this.initialFocus.nativeElement.focus(); //(A) } 但是，在子进程执行“.focus()”语句（A）之后，“focus”事件监听器（B）不会捕获“focus”事件 - 因此会出现“emit()”（ C) 永远不会被执行。 我可以看到焦点事件处理程序附加到所需的 HTML 元素（this.initialFocus.nativeElement 指向，这是一个 kendo-dropdownlist） - 但是焦点事件侦听器附加了两个事件（第一个指的是“文档”）元素 [通过 zone.js 设置]，第二个指的是 this.initialFocus.nativeElement 指向的元素） - 见下文 如果我手动删除“文档”事件处理程序并将焦点放在有问题的元素上，“焦点”处理程序将捕获该事件并执行“emit()” 通常如何处理这种情况 - 无论“文档”事件处理程序是否存在，我都需要定义的焦点事件也运行 - 或者我是否需要删除“文档”事件处理程序 - 如果是这样怎么办？ 非常感谢 据我所知，kendo-dropdownlist无法接收焦点（并且不应该按照其设计）。在开发工具控制台中输入： setInterval(() => console.log(document.activeElement), 1000); 然后聚焦所需的元素，您将看到span元素已聚焦。

如何将事件委托添加到单选按钮上的“更改”事件（而不是单击）？

我经常使用类似代码的父元素上的“click”事件轻松实现事件委托 HTML： 我经常使用类似代码的父元素上的“单击”事件轻松实现事件委托 HTML： <div> <span> <input type="radio" id="all0" name="difficulty-ask" class="difficultyaskclass" value="all" checked="checked" /> <label for="all0">All</label> <input type="radio" id="2easy1" name="difficulty-ask" class="difficultyaskclass" value="easy" /> <label for="2easy1">Easy</label> <input type="radio" id="2med2" name="difficulty-ask" class="difficultyaskclass" value="medium" /> <label for="2med2">Medium</label> <input type="radio" id="2hard3" name="difficulty-ask" class="difficultyaskclass" value="hard" /> <label for="2hard3">Hard</label> </span> </div> JS： parentelement.addEventlistener('click', (event) => { if(event.target.classList.contains('targetelement'){Code..}}; （父元素只是一个常规的div，其中放置了单选按钮） 如果单选按钮切换状态，它现在如何处理“更改”事件？ 我首先通过循环遍历所有这些，然后为每个添加一个事件监听器来使其工作。但这显然不是理想的解决方案，我肯定需要一些事件委托。 您可以使用 input 事件，该事件对任何表单元素也有效 演示： const myForm = document.forms['my-form']; myForm.addEventListener('submit', e => { e.preventDefault(); // disable submit - page reload const formValues = Object.fromEntries(new FormData(myForm).entries()); console.log( formValues ); setInterval(console.clear,8000); }) myForm.addEventListener('input', e => { if (!e.target.matches('input[type="radio"]')) return; console.log(myForm['difficulty-ask'].value); setInterval(console.clear,2000); });label { display:block; } fieldset { width: fit-content; }<form name="my-form"> <fieldset> <legend> difficulty </legend> <label> <input name="difficulty-ask" type="radio" value="all" checked > All </label> <label> <input name="difficulty-ask" type="radio" value="easy" > Easy </label> <label> <input name="difficulty-ask" type="radio" value="medium" > Medium </label> <label> <input name="difficulty-ask" type="radio" value="hard" > Hard </label> </fieldset> <button>submit</button> </form>

在 React 组件上添加事件监听器

我想在 {children} 上发生操作时在 Header 上设置一个事件，我该怎么做 函数基本（{孩子}）{ 返回 （ <> {孩子们} 我想在 {children} 上发生操作时在 Header 上设置一个事件，我该怎么做 function Basic({ children }) { return ( <> <Header/> {children} <Footer /> </> ); } export default Basic; 我尝试过文档事件，但没有成功 {chidren} 是一个溢出 y 组件，当我在其上滚动时，我希望事件将分派到 Header 在顶层创建一个状态并将其传递给子级并监听状态变化。 // Header.jsx import { useEffect } from "react" function Header({ event }) { useEffect(() => { if (event) { // Set Event console.log("Event Set") } else { console.log("Event Removed") } }, [event]) return <div>Header</div> } export default Header // Basic.jsx import Header from "./Header" function Basic({ children, event }) { return ( <> <Header event={event} /> {children} </> ) } export default Basic // MainContainer.jsx import { useState } from "react" import Basic from "./Basic" function Container() { const [event, setEvent] = useState(false) const handleClick = () => { setEvent(!event) } return ( <Basic event={event}> <p>Click on the button</p> <button onClick={handleClick}>Click</button> </Basic> ) } export default Container

自定义对象上不允许 DML 操作 INSERT

我有一个在平台事件上触发的触发器。活动很简单。它有一个资产 ID，它应该创建自定义对象 Magazine__c 的记录并将它们与资产相关联。当进入...

我正在使用pygame，update()仅在第一次有效

当我运行 update() 函数时，它会更新窗口，但是随后我尝试更新窗口时，它不会更新，即使我调用完全相同的函数。问题是

如何正确使用事件委托，而不是为同一事件类型添加并发的第二个事件侦听器？

我正在使用 document.addEventListener("DOMContentLoaded", function () 强制输入模式（首先必须是字母，然后防止连续空格等） 现在我想做第二个

如何为同一事件类型添加第二个事件侦听器或如何正确使用事件委托？

我正在使用 document.addEventListener("DOMContentLoaded", function () 强制输入模式（首先必须是字母，然后防止连续空格等） 现在我想做第二个