在button-div中的任何地方都可以输入inputfield

Question

我正在实现一个FileUpload并使用bootstrap按钮类创建了<div>以使其看起来更好。

但是，自从我这样做以后，input只能在特定位置点击（在'aufnehmen'上方）。

有人可以告诉我在点击div上的任何地方时如何打开窗口吗？

这是一个演示我问题的小提琴。

.btn-lg{
    font-size: 36px !important;
}

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}

.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<div class="fileUpload btn btn-primary btn-lg">
        <span>Foto aufnehmen</span>
        <input type="file" accept="image/*" name="sampleFile" id="cameraImg" class="upload" onchange="processImg(this)"
               value="">
    </div>

Answer 1

您可以使用label代替div来包装文件输入。

<label for="cameraImg">

.btn-lg {
  font-size: 36px !important;
}
.fileUpload {
  position: relative;
  overflow: hidden;
  margin: 10px;
}
.fileUpload input.upload {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<label for="cameraImg" class="fileUpload btn btn-primary btn-lg">
  <span>Foto aufnehmen</span>
  <input type="file" accept="image/*" name="sampleFile" id="cameraImg" class="upload" onchange="processImg(this)" value="">
</label>

Answer 2

你很快就得到了很多问题的答案，但我认为向你展示我们如何在如此短的时间内发现问题是很重要的，也就是说，如何一般地调试这些问题。

如果您检查开发人员控制台中的元素并将鼠标悬停在代码中，则可以看到突出显示的轮廓。

这样，您可以看到输入元素本身没有按钮那么高，这就是为什么该区域外的任何点击都没有触发输入的点击事件。<\ n / p>

从那时起，您可以提出自己的解决方案（根据建议的答案设置height: 100%，或者top: 0; right: 0; bottom: 0; left: 0等。）

Answer 3

您可以在height: 100%：

上设置input来解决此问题

.btn-lg {
  font-size: 36px !important;
}
.fileUpload {
  position: relative;
  overflow: hidden;
  margin: 10px;
}
.fileUpload input.upload {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
  border: 1px solid #C00;
  height: 100%; /* add this rule */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="fileUpload btn btn-primary btn-lg">
  <span>Foto aufnehmen</span>
  <input type="file" accept="image/*" name="sampleFile" id="cameraImg" class="upload" onchange="processImg(this)" value="">
</div>

Answer 4

您可以添加：

.fileUpload input.upload {
  width: 100%;
  height: 100%;
}

Answer 5

设置width:100%; height:100%;对于input.upload，它可以工作...查看下面的代码段

.btn-lg{
    font-size: 36px !important;
}

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}

.fileUpload input.upload {
  width:100%;
  height:100%;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<div class="fileUpload btn btn-primary btn-lg">
        <span>Foto aufnehmen</span>
        <input type="file" accept="image/*" name="sampleFile" id="cameraImg" class="upload" onchange="processImg(this)"
               value="">
    </div>

Answer 6

试试这个

.btn-lg{
    font-size: 36px !important;
}

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}

.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>



<div class="fileUpload btn btn-primary btn-lg"  > 
Foto aufnehmen
<input type="file" style="opacity: 0.0; position: absolute; top:0; left: 0; bottom: 0; right:0; width: 100%; height:100%;" />
</div>