javascript - WebcamJS 覆盖 HTML 表单中的返回按钮

Question

对于社区网站，我创建了一个 HTML 表单来添加新用户。如果新用户想立即制作个人资料照片，可以使用 WebcamJS(使用 v1.0.2，已经可以实现)。

但是，当我想添加新用户并填写所有数据(带或不带图片)并按 Return 键时，不会提交表单，而是会打开一个新的网络摄像头 div。 我尝试了很多不同的东西，甚至disabling the default behavior按回车键，但问题仍然存在。 希望大家能够帮忙!

简化的 HTML 示例:

Webcam.set({
  width: 400,
  height: 300,
  //dest_width: 400,
  //dest_height: 300,
  image_format: 'jpeg',
  jpeg_quality: 80
});

$("#maak_foto").hide();
$("#foto_maken").click(function() {
  Webcam.attach('#my_camera');
  $("#maak_foto").show();
  $("#my_camera").show();
  $("#foto_form").show();
});
$("input#foto_gebruiken").click(function() {
  $("#my_camera").hide();
  $("#pre_take_buttons").hide();
});

function preview_snapshot() {
  Webcam.freeze();
  // swap button sets
  document.getElementById('pre_take_buttons').style.display = 'none';
  document.getElementById('post_take_buttons').style.display = '';
}

function cancel_preview() {
  Webcam.unfreeze();
  // swap buttons back
  document.getElementById('pre_take_buttons').style.display = '';
  document.getElementById('post_take_buttons').style.display = 'none';
}

function save_photo() {
  // actually snap photo (from preview freeze) and display it
  Webcam.snap(function(data_uri) {
    // display results in page
    document.getElementById('results').innerHTML =
      'Jouw foto:<br>' +
      '<img src="' + data_uri + '"/>';
    // swap buttons back
    document.getElementById('pre_take_buttons').style.display = '';
    document.getElementById('post_take_buttons').style.display = 'none';

    var raw_image_data = data_uri.replace(/^data\:image\/\w+\;base64\,/, '');
    document.getElementById('webcam').value = raw_image_data;
    //document.getElementById('wijzigen').submit();
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://intern.ifmsa.nl/leden/webcam/webcam.js"></script>
<form name="htmlform" method="post" enctype="multipart/form-data" action="<?php $_SERVER['PHP_SELF'] ?>">
  <label>Voornaam</label>
  <input type="text" name="voornaam">
  <br>
  <label>Email</label>
  <input type="email" name="email">
  <br>
  <label>Photo</label>
  <div>
    <input name="foto" type="file">
    <button id="foto_maken" onclick="return false" ;>Or make another one</button>
    <input id="webcam" type="hidden" name="webcam" value="">
  </div>
  <br>

  <div id="results"></div>
  <div id="my_camera" style="display: none; clear: left;"></div>

  <div id="pre_take_buttons">
    <input type="button" id="maak_foto" value="Take photo" onClick="preview_snapshot(); return false;">
  </div>
  <div id="post_take_buttons" style="display:none;">
    <input type="button" value="Another photo" onClick="cancel_preview(); return false;">
    <input name="webcamdefi" id="foto_gebruiken" type="button" value="Use photo" onClick="save_photo(); return false;">
  </div>

  <label>Confirm password</label>
  <input name="pass" type="password" required>
  <input class="submit" type="submit" name="submit" value="Wijzigen">
</form>

Answer 1

简单的魔术(第一个标签button#foto_maken被解释为submit按钮并在按下回车键时触发):

更改此:

<button id="foto_maken" onclick="return false" ;>Or make another one</button>

对此:

<input type="button" id="foto_maken" value="Or make another one"/>

[http://jsfiddle.net/2es2yf0y/ ]

更清晰的例子:http://jsfiddle.net/stdob/tfss0sz2/2/