我已将事件附加到文本框中addEventListener.它工作正常.当我想以编程方式从另一个函数触发事件时,我的问题出现了.
我该怎么做?
这些天我们可以将文件拖放到一个特殊的容器中,然后用XHR 2上传它们.有现场进度条等非常酷的东西.这里的例子.
但有时我们不希望那么冷静.我想要的是将文件 - 一次多个 - 拖放到标准的HTML文件输入中:<input type=file multiple>.
那可能吗?有没有办法用文件丢弃中的正确文件名(?)"填充"文件输入?(出于文件系统安全原因,完整文件路径不可用.)
为什么?因为我想提交一份正常的表格.适用于所有浏览器和所有设备.拖放只是渐进式增强,以增强和简化用户体验.标准文件输入(+ multiple属性)的标准表格将在那里.我想添加HTML5增强功能.
编辑
我知道在某些浏览器中,您有时(几乎总是)将文件放入文件输入本身.我知道Chrome通常会这样做,但有时它会失败然后将文件加载到当前页面中(如果您填写表单,则会失败).我想傻瓜和浏览器一样.
我需要从下拉菜单中选择一个元素.
例如,打开这个:
<select id="fruits01" class="select" name="fruits">
<option value="0">Choose your fruits:</option>
<option value="1">Banana</option>
<option value="2">Mango</option>
</select>
Run Code Online (Sandbox Code Playgroud)
所以首先我要点击它.我这样做:
inputElementFruits = driver.find_element_by_xpath("//select[id='fruits']").click()
Run Code Online (Sandbox Code Playgroud)(好吧,打开菜单)
Mango但它没有用.我想使用jquery在$(document).ready中触发下拉列表的更改事件.
我在用户详细信息页面中有国家和州的级联下拉列表.如何使用C#设置MVC中的国家和州的值(基于用户ID从DB中获取).
如何<select>使用JavaScript 更改HTML 的选项(没有像jQuery这样的库),同时触发相同的事件,就像用户进行了更改一样?
例如,使用以下代码,如果我用鼠标更改选项,则会触发事件(即onchange运行).但是,当我使用JavaScript更改选项时,它不会触发任何事件.当使用JavaScript选择选项时onclick,是否可以触发触发器关联的事件处理程序,如onchange,等等?
<select id="sel" onchange='alert("changed")'>
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
</select>
<input type="button" onclick='document.getElementById("sel").options[1].selected = true;' value="Change option to 2" />
Run Code Online (Sandbox Code Playgroud)
我的目标是观察输入值并在其值以编程方式更改时触发处理程序.我只需要它用于现代浏览器.
我尝试了很多组合使用defineProperty,这是我最新的迭代:
var myInput=document.getElementById("myInput");
Object.defineProperty(myInput,"value",{
get:function(){
return this.getAttribute("value");
},
set:function(val){
console.log("set");
// handle value change here
this.setAttribute("value",val);
}
});
myInput.value="new value"; // should trigger console.log and handler
Run Code Online (Sandbox Code Playgroud)
这似乎做了我的预期,但感觉就像一个黑客,因为我重写现有的价值属性和玩value(属性和属性)的双重身份.它还打破了change似乎不喜欢修改属性的事件.
我的其他尝试:
watch和observepolyfill,但它们打破输入值属性什么是获得相同结果的正确方法?
现场演示:http://jsfiddle.net/L7Emx/4/
[编辑]澄清一下:我的代码正在观看一个输入元素,其他应用程序可以推送更新(例如,由于ajax调用,或者由于其他字段的更改).我无法控制其他应用程序如何推送更新,我只是一个观察者.
[编辑2]为了澄清"现代浏览器"的含义,我对能够在IE 11和Chrome 30上运行的解决方案感到非常满意.
[更新]根据接受的答案更新了演示:http://jsfiddle.net/L7Emx/10/
@ mohit-jain建议的技巧是为用户交互添加第二个输入.
我想知道,目的是什么CustomEvent,因为它可以很容易被老人模仿Event.
那么,有什么区别:
var e = new Event("reload");
e.detail = {
username: "name"
};
element.dispatchEvent(e);
Run Code Online (Sandbox Code Playgroud)
和
var e = new CustomEvent("reload", {
detail: {
username: "name"
}
});
inner.dispatchEvent(e);
Run Code Online (Sandbox Code Playgroud)
CustomEvent如果很容易将自定义数据附加到普通的Event对象,为什么会存在?
我有以下表单字段,工作正常.通过这种方式,我的意思是当我在字段中键入,粘贴等时fooObj.expDate,实时更新得很好并且验证发生.我有预标签,这对我自己来说很明显.
<pre>{{fooObj.someDate | json}}</pre>
<div class="form-group inline-form__input">
<label for="someDate">Some Date</label>
<input tabindex="2"
type="tel"
class="form-control"
maxlength="7"
placeholder="MM/YY"
formControlName="someDate"
name="someDate"
[(ngModel)]="fooObj.someDate"
someDate>
</div>
Run Code Online (Sandbox Code Playgroud)
但是,我someDate在这个领域有这个指令.该指令拦截粘贴事件.它取消了粘贴事件,对输入进行了一些奇特的格式化,然后执行此操作:
setTimeout(() => {
this.target.value = 'lol fancy date';
}, 3000);
Run Code Online (Sandbox Code Playgroud)
target.value是我的someDate领域.值在输入框内得到了很好的更新(我看到它在输入内的屏幕上发生了变化).但是,fooObj.someDate未更新并且不会进行验证.例如,在超时中设置目标值不会触发与键入/粘贴/任何其他javascript事件相同的验证/对象更新.
Angular docs对此没什么用处:
只有当应用程序响应异步事件(例如击键)时,Angular才会更新绑定(以及屏幕).此示例代码将keyup事件绑定到数字0,可能是最短的模板语句.虽然该语句没有任何用处,但它满足Angular的要求,因此Angular将更新屏幕.
那么,如何从该字段的指令触发字段更新?
编辑:我尝试使用我元素中的代码触发注释中建议的元素上的事件:如何手动触发onchange事件?
运行正常,但不强制该字段更新:
if ("createEvent" in document) {
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
this.target.dispatchEvent(evt);
}
else
this.target.fireEvent("onchange");
Run Code Online (Sandbox Code Playgroud)
此外,这里是我得到合成事件的想法,不会触发"正常"的行为作为一个keyDown或任何会(我真的希望我误读或他们错误的这个用例,但它不适用于尝试重新发布粘贴事件):https://www.w3.org/TR/clipboard-apis/#clipboard-event-interfaces
注意:合成事件没有默认操作.换句话说,虽然上面的脚本将触发粘贴事件,但数据实际上不会粘贴到文档中.
我有一个输入字段,我想分配一个新值并触发.onchange()事件.我做了以下事情:
document.getElementById("range").value='500';
document.getElementById("range").onchange();
Run Code Online (Sandbox Code Playgroud)
范围是我的输入ID.我收到以下错误:
Uncaught TypeError: Cannot read property 'target' of undefined
Run Code Online (Sandbox Code Playgroud)
有没有办法定义'目标'?谢谢
我正在测试的网页正在使用淘汰赛.在我们网站上目前没有使用淘汰赛的其他网页上我没有遇到同样的问题.我的方案是页面打开的位置,我输入各种必填字段并单击保存按钮.在它输入最后一个文本字段中的值和单击保存按钮之间的某个时刻之前,先前具有值的字段将被清除,因此脚本无法继续.这是我正在运行的代码示例:
driver.findElement(By.id("sku")).clear();
driver.findElement(By.id("sku")).sendKeys(itemNo);
driver.findElement(By.id("desktopThankYouPage")).clear();
driver.findElement(By.id("desktopThankYouPage")).sendKeys(downloadUrl);
driver.findElement(By.id("mobileThankYouPage")).clear();
driver.findElement(By.id("mobileThankYouPage")).sendKeys(mobileDownloadUrl);
driver.findElement(By.id("initialPrice")).clear();
driver.findElement(By.id("initialPrice")).sendKeys(initialPrice);
driver.findElement(By.id("submitSiteChanges")).click();
Run Code Online (Sandbox Code Playgroud)
就像我说的那样,在它输入最后一个字段中的文本和它点击的时间之间保存之前有文本的字段被清除掉,因此我的测试失败了.问题是它并不总是发生.有时测试运行正常,有时则没有.
我试过把Thread.sleep(x); 到处查看是否暂停某些点可以解决问题.我也尝试使用javascript在后台等待可能正在运行的任何ajax.还有driver.manage().timeouts().implicitlyWait(10,TimeUnit.SECONDS)的隐式等待.它们似乎都没有任何区别.
我正在运行selenium服务器的2.13版本,我的所有测试都在Firefox 8上运行.
任何有关这方面的帮助将不胜感激!
javascript ×6
dom-events ×3
selenium ×2
triggers ×2
webdriver ×2
angular ×1
asp.net-mvc ×1
dom ×1
events ×1
file-upload ×1
html ×1
html-input ×1
html-select ×1
html5 ×1
input ×1
jquery ×1
knockout.js ×1
onchange ×1
python ×1
web-scraping ×1