語音識別按鈕調用在表單內產生帖子

Question

我在表單中使用 webkitspeechRecongition，以便用戶可以按下按鈕並使用他們的聲音填寫表單。 問題是，當調用是按鈕的一部分時，在表單內，它會生成一個帖子/提交並刪除正在說出的文本。

如果我刪除表格，這些字段會完美填寫，從而實現目標。 但我需要一個提交按鈕來閱讀文本和處理數據。 從而形成。
我在按鈕上嘗試了以下操作，結果相同：

<button type="button" id="start-record-finalcomment" class="btn" onmousedown="StartRecording('#FinalComment')" onmouseup="StopRecording(0)" ontouchstart="StartRecording('#FinalComment')" ontouchend="StopRecording(0)">&#8858;</button>

<input type="button" id="start-record-finalcomment" class="btn" onmousedown="StartRecording('#FinalComment')" onmouseup="StopRecording(0)" ontouchstart="StartRecording('#FinalComment')" ontouchend="StopRecording(0)">&#8858;

<input type="button" onclick='return false;' id="start-record-finalcomment" class="btn" onmousedown="StartRecording('#FinalComment')" onmouseup="StopRecording(0)" ontouchstart="StartRecording('#FinalComment')" ontouchend="StopRecording(0)">&#8858;

如何讓按鈕不產生帖子，只需將數據放入字段中？ 這可能會受到挑戰，因為語音識別 API 中有一些東西會導致這種情況。 如果是這樣，我想知道。 在撰寫本文時無法找到任何東西。

代碼片段如下：

<?php
$i=1;
$EntryId = 1;
$ScoreField = "Point1";
?>
<form id="SUBMIT-SPEECH"  name="SUBMIT-SPEECH" enctype="multipart/form-data"  action="" method="post" autocomplete="off" onkeydown="noreturnkey(event);">

<div style="width:50px; float:left; margin-right:5px; ">
<input type="text" style="float:left; margin-bottom:5px;" id="<?php echo $ScoreField;?>" name="<?php echo $ScoreField;?>" placeholder="0.0" onclick="noreturnkey(event)"  onchange="FormatScore(<?php echo $i;?>, <?php echo $EntryId;?>);" onkeyup="calc(<?php echo $i;?>, 7, 70, <?php echo $EntryId;?>, 0 );" >
</div>

<div style="width:50px; font-size:14px; float:left; margin-left: 5px;">
<button id="start-record-score-btn<?php echo $i;?>" name="start-record-score-btn<?php echo $i;?>" class="btn" onmousedown="StartRecording('<?php echo "#" . $ScoreField;?>')" onmouseup="StopRecording(<?php echo $i;?>);" ontouchstart="StartRecording('<?php echo "#" . $ScoreField;?>')" ontouchend="StopRecording('<?php echo $i;?>');" >&#8858;</button>
</div> 

<input type="submit" id="SUBMIT-SPEECH"  name="SUBMIT-SPEECH" value="SEND EVALUATION" onkeydown="noreturnkey(event)" />
</form>


// Yes, I know this is not an exact address.  Just shows that the code would be loaded here
<script src="jquery.min.js"></script>


        <script>
        try {
  var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  var recognition       = new SpeechRecognition();
}
catch(e) {
  console.error(e);
  $('.no-browser-support').show();
  $('.app').hide();
}


var noteTextarea = $('');
var noteContent = '';

var moveGroup     = '';
var nRunningScore = 0;

/*-----------------------------
      Voice Recognition 
------------------------------*/

// If false, the recording will stop after a few seconds of silence.
// When true, the silence period is longer (about 15 seconds),
// allowing us to keep recording even when the user pauses. 
recognition.continuous = true;

// Outpupt on the fly
recognition.interimResults = false;

recognition.maxAlternatives = 1;
recognition.lang = 'en-US';

// Start the microphone for this page...but what if it is not accepted
recognition.start();

///////////////////////////////////////////////////////////////////
// This block is called every time the Speech APi captures a line. <br>
// This is what recieves the mic transcript
recognition.onresult = function(event) {

  // event is a SpeechRecognitionEvent object.
  // It holds all the lines we have captured so far. 
  // We only need the current one.
  var current = event.resultIndex;

  // Get a transcript of what was said.
  var transcript = event.results[current][0].transcript;

if(moveGroup != '' && moveGroup != 0)
{
  // Change the number text to numeric for scores
  transcript = transcript.replace("zero", "0");
  transcript = transcript.replace("Zero", "0");
  transcript = transcript.replace("one", "1");
  transcript = transcript.replace("One", "1");
  transcript = transcript.replace("two", "2");
  transcript = transcript.replace("Two", "2");
  transcript = transcript.replace("three", "3");
  transcript = transcript.replace("Three", "3");
  transcript = transcript.replace("four", "4");
  transcript = transcript.replace("Four", "4");
  transcript = transcript.replace("five", "5");
  transcript = transcript.replace("Five", "5");
  transcript = transcript.replace("six", "6");
  transcript = transcript.replace("Six", "6");
  transcript = transcript.replace("sex", "6");
  transcript = transcript.replace("Sex", "6");
  transcript = transcript.replace("seven", "7");
  transcript = transcript.replace("Seven", "7");
  transcript = transcript.replace("eight", "8");
  transcript = transcript.replace("Eight", "8");
  transcript = transcript.replace("nine", "9");
  transcript = transcript.replace("Nine", "9");
  
  transcript = transcript.replace(/[^0-9.]/g,'');
  Content    = Number(transcript);
  transcript = Content.toFixed(1);
  noteContent += transcript;
  noteTextarea.val(noteContent);
  
  calc(moveGroup, 7, 70, <?php echo $EntryId;?>, 0 );
}
else
{
  noteContent += transcript;
  noteTextarea.val(noteContent);
}
};

recognition.onstart = function() { 
  //instructions.text('Voice recognition activated. Try speaking into the microphone.');
}

recognition.onspeechend = function() {
  //instructions.text('You were quiet for a while so voice recognition turned itself off.');
  // Store the text to the field.
  //alert('Move Group: ' + moveGroup);
}

recognition.onerror = function(event) {
  //if(event.error == 'no-speech') {
  //  instructions.text('No speech was detected. Try again.');  
  //};
}


/*-----------------------------
      Button Call
------------------------------*/
function StartRecording(FieldName)
{ 
noteContent = '';
noteTextarea = $(FieldName);
recognition.start();
}

function StopRecording(FieldIndex)
{   
moveGroup = FieldIndex;
recognition.stop();
}


function FormatScore(i, EntryId)
{
var Field   = "MovePoints-" + EntryId + '-' + i;
var Score   = document.getElementById(Field).value ;
Content     = Number(Score);
Score       = Content.toFixed(1);
document.getElementById(Field).value = Score;
}

</script>

Answer 1

解決它：！！！ 誰知道！ 他們的關鍵是將以下命令添加到按鈕字段中的每個 javascript 調用中，如下所示：

type="button" 
preventDefault();
 onclick='return false;'

因此，在更改表格時：

<form id="SUBMIT-SPEECH"  name="SUBMIT-SPEECH" enctype="multipart/form-data"  action="" method="post" autocomplete="off" onkeydown="noreturnkey(event);">

<div style="width:50px; float:left; margin-right:5px; ">
<input type="text" style="float:left; margin-bottom:5px;" id="<?php echo $ScoreField;?>" name="<?php echo $ScoreField;?>" placeholder="0.0" onclick="noreturnkey(event)"  onchange="FormatScore(<?php echo $i;?>, <?php echo $EntryId;?>);" onkeyup="calc(<?php echo $i;?>, 7, 70, <?php echo $EntryId;?>, 0 );" >
</div>

<div style="width:50px; font-size:14px; float:left; margin-left: 5px;">
<button type="button" id="start-record-score-btn<?php echo $i;?>" name="start-record-score-btn<?php echo $i;?>" class="btn" onmousedown="StartRecording('<?php echo "#" . $ScoreField;?>'); preventDefault();" onmouseup="StopRecording(<?php echo $i;?>); preventDefault();" ontouchstart="StartRecording('<?php echo "#" . $ScoreField;?>'); preventDefault();" ontouchend="StopRecording('<?php echo $i;?>'); preventDefault();" onclick='return false;'>&#8858;</button>
</div> 

<input type="submit" id="SUBMIT-SPEECH"  name="SUBMIT-SPEECH" value="SEND EVALUATION" onkeydown="noreturnkey(event)" />
</form>