WebcamJS 覆盖 HTML 表单中的返回按钮答案

【问题标题】：WebcamJS overriding return button in HTML formWebcamJS 覆盖 HTML 表单中的返回按钮
【发布时间】：2015-07-18 15:30:40
【问题描述】：

对于一个社区站点，我创建了一个 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>

【问题讨论】：

标签： javascript jquery html forms

【解决方案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/

【讨论】：