javascript - 为什么我的 div 子元素的输入元素不可点击,而当我用按钮替换此输入时,该按钮是可点击的
问题描述
我想创建一个包含按钮和输入元素的 div 元素。但是当输入在 div 中时,输入变得不可点击
var video_button = document.createElement("BUTTON");
var user_area = document.createElement("DIV");
var inp = document.createElement("INPUT");
function upload_video(e){
console.log("upload_video function");
var v = document.createElement("VIDEO");
inp.onchange = function(e){
v.src = window.URL.createObjectURL(inp.files[0]);
v.style.heigth = "1000px";
v.style.width = "1000px";
user_area.appendChild(v);
}
}
function input(e){
console.log("input function");
inp.setAttribute("type","file");
user_area.appendChild(inp);
inp.addEventListener("click",upload_video)
}
window.onload = function(){
video_button.innerHTML = "upload a video";
video_button.addEventListener("click",input);
user_area.setAttribute("contentEditable","true");
user_area.style.width = "100px";
user_area.style.height = "500px";
document.body.appendChild(user_area);
user_area.appendChild(video_button);
}
解决方案
由于内容可编辑属性设置为 true,这在 Firefox 上不起作用。这背后是有原因的。如果您不需要那么多,可以将其删除。
var video_button = document.createElement("BUTTON");
var user_area = document.createElement("DIV");
var input_wrapper = document.createElement("DIV");
var inp = document.createElement("INPUT");
function upload_video(e){
console.log("upload_video function");
var v = document.createElement("VIDEO");
inp.onchange = function(e){
v.src = window.URL.createObjectURL(inp.files[0]);
v.style.heigth = "1000px";
v.style.width = "1000px";
user_area.appendChild(v);
}
}
function input(e){
console.log("input function");
inp.setAttribute("type","file");
input_wrapper.setAttribute("contentEditable","false");
user_area.appendChild(input_wrapper);
input_wrapper.appendChild(inp);
inp.addEventListener("click",upload_video)
}
window.onload = function(){
video_button.innerHTML = "upload a video";
video_button.addEventListener("click",input);
user_area.setAttribute("contentEditable","true");
user_area.style.width = "100px";
user_area.style.height = "500px";
document.body.appendChild(user_area);
user_area.appendChild(video_button);
}
推荐阅读
- specifications - ECMA CLI 规范:值类型的 initobj 指令描述
- sql - 在 Apply 块中使用需要表参数的标量函数
- amazon-web-services - Elastic Beanstalk 上的 OpenSSL 漏洞
- microsoft-graph-api - 管理机器人的电话号码
- mulesoft - 需要使用 Anypoint 平台 MQ 以适当的顺序(先进先出)广播消息(一对多)
- android - 相机预览和录制的视频与宽高比不匹配
- r - 讨厌的饼图箭头
- mysql - 如何在 MySQL 5.7.5 严格模式下使用 GROUP BY 和 LEFT JOIN
- android - 是否可以忽略 Google Play 中的发布前报告错误?
- python - 将多种数据类型抓取到同一个数据框中