Question

按照我的标题，我试图连接3个具有基于单选按钮按下的动态值的文本框。我对HTML和Java非常陌生，所以谷歌一直在自我教学中提出这个问题，所以它可能很混乱。到目前为止的代码如下：

<input type="radio" name="r3" onclick="myFunction2(this.value)" value="CA$!">Only want to talk to case owner<br>
<input type="radio" name="r3" onclick="myFunction2(this.value)" value="VO$!">Transfer to Voicemail<br> 
<input type="radio" name="r3" onclick="myFunction2(this.value)" value="EM$!">No EOS entry required<br>

<input type="radio" name="r3" onclick="myFunction2(this.value)" value="NA$!">N/A<br><br>
<input type="text" id="result2">

  </form>

以下是一部分代码如何工作的一小段内容。其余的都在jsfiddle。

我尝试使用Javascript引用ID，但它不会更新，所以我认为我的语法错误。这都是在记事本中完成的（不能访问记事本++或更好的东西）

非常感谢，如果我能提供更多信息，请告诉我。

Answer 1

自动复制到剪贴板可能很危险。但您可以按照此stackoverflow文章中的说明将所有文本连接在一起，并让用户手动完成。

How do I copy to the clipboard in JavaScript?

我这里有一个小小的链接

function copyToClipboard() {
    var result1=document.getElementById("result1").value,
    result2=document.getElementById("result2").value,
    result3=document.getElementById("result3").value,
    text=result1 + result2+ result3; 

  window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}

https://jsfiddle.net/dshun/jkxbwLwt/11/

Answer 2

嘿汤姆我今天早些时候编写了这个版本然后不得不跳下我的电脑，但在我看来，你为自己做了很多额外的代码，并在你的视图中调用了一百万次的onclick功能。为了使这项工作。

对于一般的表单，在一个页面上放置多个表单不是一个好习惯。对于这种类型的选项，可能更容易使用选择表单元素而不是多选。

在我的例子中，我模拟了一个使用select元素和多选输入元素的情境

正如我之前提到的那样，在HTML上添加onclick功能并不是一个很好的习惯，如果可能将代码保持为DRY（不要重复自己），应该避免使用。您可能想看一下javascript EventListeners

我已经评论过我的jsfiddle代码，希望能够解决任何问题这里是代码的链接以及你可以做些什么来帮助清理你的HTML。关于这一点很酷的是，这将允许您添加更多选择类型或选择输入，并将继续工作无论你只需要调整你的HTML以使其工作 https://jsfiddle.net/kriscoulson/cvwspxo9/2/

var selects = document.getElementsByTagName('select'),
radios = document.querySelectorAll("input[type='radio']"),
selectButton = document.getElementById('select-button'),
choiceButton = document.getElementById('choice-button'),
answerBox = document.querySelector('.answer');

//This is the code to add and event listener to the get select values button
selectButton.addEventListener('click',function(event){

    event.preventDefault(); // We prevent the default action when a button is clicked inside a form
    var selectArr = [] // We create an empty array to push all of our values into


    for(var i = 0; i < selects.length; i++){
        // We then loop through of the selects and push the value of each select to our array
        selectArr.push(selects[i].value)
    }

    //You can change this join method to concatnate the strings instead of having them seperated by commas
    var string = arr.join(", ");

    //The code below adds a new input with our values as  string inside.
    answerBox.innerHTML = "<input class='copy' value='"+string+"'/>";
    answerBox.children[0].select(); //We can then select the the code to make it easy to copy to the clipboard
});


//This is the code to add and event listener to the get multichoice values button
choiceButton.addEventListener('click', function(ev){
    ev.preventDefault(); // We prevent the default action when a button is clicked inside a form
    choiceArr = [] // We create an empty array to push all of our values into

    for(var i=0; i < radios.length; i++){ // We then loop through of the radios

        if(radios[i].checked){ // If the radio at the index is checked 
            // we push that indexs value to our choice array
            choiceArr.push(radios[i].value);
        }    

    }
    //You can change this join method to concatnate the strings instead of having them seperated by commas
    var string = choiceArr.join(", ");

    //The code below adds a new input with our values as  string inside.
    answerBox.innerHTML = "<input class='copy' value='"+string+"'/>";
    answerBox.children[0].select();//We can then select the the code to make it easy to copy to the clipboard

});

如何连接3个动态值文本框并将它们移动到剪贴板

2 个答案: