Javascript或jQuery输入框文本字段写入数据

q43xntqr  于 2023-01-12  发布在  jQuery
关注(0)|答案(1)|浏览(178)

我必须在我的工作中使用一个网络应用程序,我想用我创建的扩展填充(我不是程序员...)。
这个web应用有两个输入字段,我无法有效地填充,因为当我用下面的js命令填充时,字符串出现了,但是"Add"按钮没有启用,而且,当我启用它时,我无法通过click()按钮将数据发送到服务器。
当我用鼠标点击DOM的另一边时,字符串隐藏了,我意识到,值在value属性中,而不是在defaultValue中,如果我用按键填充字段,自然地,如果我点击DOM的另一边,字符串不会隐藏。
我也尝试使用jQuery和简单js编写数据输入:
输入字段1:

$('#autocomplete-sa-material').focus();
$('#autocomplete-sa-material').attr('value', 'A-10035951');
$('#autocomplete-sa-material').attr('placeholder', 'A-10035951');

arrr = document.getElementById('autocomplete-sa-material');
arrr.setAttribute("value", "A-10035951");

输入字段2:

$('#input-sa-quantity').focus();
$('#input-sa-quantity').val('27875');
brrr = document.getElementById('input-sa-quantity');
brrr.setAttribute("value", "27875");

我认为,问题是字段在更改事件后被函数修改。第一个字段可以使用下拉列表填充,在那里你可以选择确切的材料类型。但是,如果你键入键,下拉列表会被你写的字符串过滤(AJAX?)。我可以从Excel中简单地填充这个输入框Ctrl + C-Ctrl + V。
第二个字段,数量类型是十进制,以千为一组(使用空格字符每3个字符之前)。当我按下键,页面检查字符串,并从字符串创建组。
有人能帮我,我怎么写输入文本字段,我可以从那里发送数据到服务器?
我想帮助改变两个输入文本字段与js或jQuery。

    • 更新日期**:

我得到一些很好的主意,只有一个问题,我想解决的是:
我对推荐的代码做了最小限度的修改,它运行得很完美,做了它必须做的事情。修改后的代码如下:

arrr = document.getElementById('autocomplete-sa-material');
arrr.dispatchEvent(new Event('click'));
arrr.value = "A-10035951";
arrr.dispatchEvent(new Event('change'));
let event = new Event('input', { bubbles: true });
arrr.dispatchEvent(event);

brrr = document.getElementById('input-sa-quantity');
brrr.value = "27875";
let event2 = new Event('input', { bubbles: true });
brrr.dispatchEvent(event2);

现在只剩下一个问题:我必须用鼠标单击第一个输入框(sa-material),并从它,为了"添加"按钮将成为活动的。是否有任何其他可能的额外代码细节,将使按钮被激活,并将代码100%复制用户的操作?第二个输入框工作完美,有工作的类型格式和没有任何障碍运行"添加"按钮的方法...谢谢!

6kkfgxo0

6kkfgxo01#

听起来您尝试使用的Web应用程序有一些额外的逻辑,在以编程方式设置值后修改输入字段。这可能导致您遇到的问题,即“添加”按钮未启用,值未正确发送到服务器。
你可以尝试的一件事是在编程设置输入字段的值后触发其上的change事件,这将模拟用户手动键入值,并可能触发web应用程序中需要执行的任何附加逻辑,下面是一个使用jQuery实现此操作的示例:

$('#autocomplete-sa-material').val('A-10035951').change();
    $('#input-sa-quantity').val('27875').change();
    
    arrr = document.getElementById('autocomplete-sa-material');
    arrr.setAttribute("value", "A-10035951");
    arrr.dispatchEvent(new Event('change'));
    brrr = document.getElementById('input-sa-quantity');
    brrr.setAttribute("value", "27875");
    brrr.dispatchEvent(new Event('change'));

另一种方法可以尝试模拟这些字段上的按键事件,使得web应用可以像真实的用户一样处理输入字段。

arrr = document.getElementById('autocomplete-sa-material');
arrr.setAttribute("value", "A-10035951");
let event = new Event('input', { bubbles: true });
arrr.dispatchEvent(event);

brrr = document.getElementById('input-sa-quantity');
brrr.setAttribute("value", "27875");
let event2 = new Event('input', { bubbles: true });
brrr.dispatchEvent(event2);

值得注意的是,这些可能不起作用,这取决于Web应用程序的逻辑和设计。
另外,请记住,自动输入到网站的表格有时会违反网站的使用条款,所以在这样做之前检查使用条款总是一个好主意。
测试网络应用程序的行为和检查网络请求是很重要的(使用浏览器开发工具),它会给予你更深入地了解当你按下添加按钮时到底发生了什么。

相关问题