正文 

当前位置： 首页 > 问答 >

在自定义处理的输入字段中输入数据

     2023-05-09     33

关键词：

【中文标题】在自定义处理的输入字段中输入数据【英文标题】：Enter data into a custom-handled input field 【发布时间】：2020-01-12 17:09:10 【问题描述】：

我的扩展程序有一个包含项目的上下文菜单。我想做的是：当我右键单击 editable html 元素（例如 input 或 textarea），然后选择并单击菜单中的一个项目时——我的扩展程序定义的一些值被输入到输入中.

现在我已经意识到document.activeElement.value = myValue. 只需简单的输入就可以正常工作。

当有带有自定义 onChange 事件处理的输入时出现问题，例如日历或电话输入，或货币输入 - 以某种方式转换用户输入。 由于我直接在元素上设置了一个值 - 处理逻辑被省略了，这会导致各种问题。

由于 javascript 不允许类似 KeySend 的功能 - 我有什么选择？

我曾考虑过像 Puppeteer 或 Cypress 这样的测试工具 - 但它们似乎都不能打包成扩展。 Puppeteer 确实有这样的选项，但它仍然需要运行节点实例才能连接。而且我希望我的扩展程序完全是客户端的并在 Chrome 网上商店中分发 - 所以我不能要求我的用户启动节点服务器。

【问题讨论】：

@wOxxOm 您可能应该将其转换为答案，以便将其标记为已解决。 【参考方案1】：

有一个内置的DOM方法document.execCommand。 如果需要扩展，请在content script 中使用此代码。

// some.selector may be `input` or `[contenteditable]` for richly formatted inputs
const el = document.querySelector('some.selector');
el.focus();
document.execCommand('insertText', false, 'new text');
el.dispatchEvent(new Event('change', bubbles: true)); // usually not needed

它模仿物理用户输入到当前聚焦的 DOM 元素，因此所有必要的事件都将被触发（如 beforeinput、input），并将 isTrusted 字段设置为 true。在某些页面上，change 事件应额外分派，如上所示。

您可能希望选择当前文本来完全替换它而不是追加：

replaceValue('some.selector', 'new text');

function replaceValue(selector, value) 
  const el = document.querySelector(selector);
  if (el) 
    el.focus();
    el.select();
    if (!document.execCommand('insertText', false, value)) 
      // Fallback for Firefox: just replace the value
      el.value = 'new text';
    
    el.dispatchEvent(new Event('change', bubbles: true)); // usually not needed
  
  return el;

请注意，尽管 execCommand 在 2020 年被标记为过时，但它会在可预见的将来工作，因为新的编辑 API 规范尚未完成，而且要知道这些东西通常移动的速度有多慢，可能还需要 5-20 年。

【讨论】：

【参考方案2】：

@wOxxOm，非常感谢！ 我用你的代码解决了困扰我很久的问题。我用谷歌搜索了很多代码和文章近一个月。 它适用于 Facebook 和许多强大的网站。

因为 execCommand 已经过时，我尝试下面的代码运行良好，包括 Facebook。

function imitateKeyInput(el, keyChar) 
  if (el) 
    const keyboardEventInit = bubbles:false, cancelable:false, composed:false, key:'', code:'', location:0;
    el.dispatchEvent(new KeyboardEvent("keydown", keyboardEventInit));
    el.value = keyChar;
    el.dispatchEvent(new KeyboardEvent("keyup", keyboardEventInit));
    el.dispatchEvent(new Event('change', bubbles: true)); // usually not needed
   else 
    console.log("el is null");

以下代码只适用于普通网站，对强网站无效。

function fireKeyEvent(el, evtType, keyChar) 
  el.addEventListener(evtType, function(e) el.value += e.key;, false);
  el.focus();
  const keyboardEventInit = bubbles:false, cancelable:false, composed:false, key:keyChar, code:'', location:0;
  var evtObj = new KeyboardEvent(evtType, keyboardEventInit);
  el.dispatchEvent(evtObj);

【讨论】：

这没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review

在自定义函数中使用 SQL 查询作为数组参数（输入）

】在自定义函数中使用SQL查询作为数组参数（输入）【英文标题】：UseSQLqueryasarrayparameter(input)incustomfunction【发布时间】：2016-12-2916:28:58【问题描述】：我在pl/pgsql中创建了一个自定义函数，它的唯一输入是一个数组。我想将查... 查看详情

BigQuery：在自定义分区字段上运行 Select 时处理的数据

】BigQuery：在自定义分区字段上运行Select时处理的数据【英文标题】：BigQuery:DataprocessedwhenrunningSelectonCustomPartitioningField【发布时间】：2021-10-2713:39:32【问题描述】：我有一个使用架构中的时间戳字段my_partition_field（而不是摄取时... 查看详情

在 wp 管理仪表板中创建表单并将数据保存在自定义创建的数据库中

】在wp管理仪表板中创建表单并将数据保存在自定义创建的数据库中【英文标题】：Createforminwpadmindashboardandsavedataincustomcreateddb【发布时间】：2017-12-3021:19:10【问题描述】：我想在WordPress管理仪表板中创建字段文本输入和文件输... 查看详情

在自定义表格单元中更改图像视图

】在自定义表格单元中更改图像视图【英文标题】：changeimageviewincustomtablecell【发布时间】：2017-09-0609:20:51【问题描述】：我有自定义单元格的表格视图。我的表格单元格中有文本字段和图像视图。当用户输入一些字符时，它应... 查看详情

在自定义键盘扩展中检测输入对象视图类型

】在自定义键盘扩展中检测输入对象视图类型【英文标题】：Detectinputobjectviewtypeincustomkeyboardextension【发布时间】：2014-08-1911:45:15【问题描述】：我正在使用iOS8中的应用扩展开发自定义键盘。我有一个返回键，按下时我想检查输... 查看详情

如何在 Angular 中处理自定义输入组件上的输入事件？

】如何在Angular中处理自定义输入组件上的输入事件？【英文标题】：HowtohandleinputeventsoncustominputcomponentinAngular?【发布时间】：2020-01-1705:44:25【问题描述】：我正在尝试使用Angular7中的ReativeForm创建自定义输入组件，但我无法将事... 查看详情

如何使用 ControlValueAccessor Angular 在自定义输入中使用指令

】如何使用ControlValueAccessorAngular在自定义输入中使用指令【英文标题】：HowToUseADirectiveInACustomInputWithControlValueAccessorAngular【发布时间】：2020-06-0308:26:03【问题描述】：我已经在我的Angular应用程序中使用ControlValueAccessor创建了一个... 查看详情

如何根据文本输入类型在自定义键盘中标记返回键

】如何根据文本输入类型在自定义键盘中标记返回键【英文标题】：Howtolabelreturnkeyincustomkeyboardbasedontextinputtype【发布时间】：2014-09-2716:53:43【问题描述】：我正在创建一个自定义键盘。我有一个返回/出发/等按钮。如果用户正在... 查看详情

如何为自定义单元格中的动态附加输入字段添加约束

...ustomcell【发布时间】：2019-12-0410:45:23【问题描述】：如何在自定义表格单元格中添加动态输入字段的同时实现单元格的动态高度-(IBAction)clickButtonAdd:(id)senderNSLog(@"testchekboc");CGFlo 查看详情

项目中如何对xss统一处理(代码片段)

...t-Back-End原理Jackson框架允许自定义JsonDeserializer，因此可以在自定义的JsonDeserializer中剔除恶意XSS脚本注入。自定义Xss过 查看详情

数据字典中的输入帮助的定义

①固定值域：在数据字典中进行域定义的过程中，可以在技术特性中的Valuerange选项卡中限定属于该域的数据元素的值域。如果在具体的数据表字段中没有指定特定的约束表或者输入帮助，则系统默认使用该值域作为字段输入帮... 查看详情

切换活动时是不是使用 onSaveInstancestate 或 SQLite 将用户输入保存在自定义对象的 ArrayList 中

...活动时是不是使用onSaveInstancestate或SQLite将用户输入保存在自定义对象的ArrayList中【英文标题】：DoIuseonSaveInstancestateorSQLitetosaveuserinputinArrayListofcustomobjectwhenswitchingactivities切换活动时是否使用onSaveInstancestate或SQLite将用户输入保存... 查看详情

使用堆栈导航在自定义标题之间传递文本输入

】使用堆栈导航在自定义标题之间传递文本输入【英文标题】：passingtextinputbetweencustomheaderusingstacknavigation【发布时间】：2021-09-1500:15:43【问题描述】：我想使用堆栈导航的自定义标题连接SearchMain、SearchHistoryList和SearchResult屏幕... 查看详情

iPhone：如何在自定义单元的动态数量上管理 UITextfield 委托方法

】iPhone：如何在自定义单元的动态数量上管理UITextfield委托方法【英文标题】：iPhone:HowtomanageUITextfielddelegatemethodsondynamicnumberofcustomcells【发布时间】：2011-08-1311:48:12【问题描述】：我的表格视图中有动态数量的文本字段，我将每... 查看详情

EditText.SetText() 在自定义适配器中更改我的软键盘输入类型

】EditText.SetText()在自定义适配器中更改我的软键盘输入类型【英文标题】：EditText.SetText()changesmysoftkeyboardinputtypeinacustomadapter【发布时间】：2012-03-1701:37:35【问题描述】：我正在使用自定义基础适配器来实现customListView。listView类... 查看详情

自定义数据表中输入过滤器的样式

】自定义数据表中输入过滤器的样式【英文标题】：Customizestyleofinputfilterindatatable【发布时间】：2019-03-1205:22:18【问题描述】：尝试在我的Laravel数据表中的输入字段旁边添加搜索图标。我无法使用jquery更改输入字段旁边的文本“... 查看详情

html超文本标记语言——表单输入类型

 1、<inpurtype="text">：定义供文本输入的单行输入字段；2、<inputtyope="password">：定义密码字段。password字段中的字符会被做掩码处理（显示为星号或实心圆）；3、<inputtype="submit"value="submit">：定义提交按钮，将表单... 查看详情

如何在自定义 django 表单中隐藏 django 标签？

】如何在自定义django表单中隐藏django标签？【英文标题】：HowcanIhideadjangolabelinacustomdjangoform?【发布时间】：2012-09-1720:18:06【问题描述】：我有一个自定义表单，可以创建一个字段的隐藏输入：classMPForm(forms.ModelForm):def__init__(self,*... 查看详情