复选框使用 Javascript 将文本插入文本区域

Posted 2023-05-07

【中文标题】复选框使用 Javascript 将文本插入文本区域

【英文标题】：Checkbox inserts text into textarea with Javascript

【发布时间】：2014-09-15 10:47:58

【问题描述】：

我正在尝试仅使用 javascript（而不是 JQuery）来做一些非常简单的事情。 基本上，我想使用一个复选框来切换文本区域中的文本。因此，如果未选中该复选框，我希望它在文本区域中说“你好”。如果复选框被选中，文本区域应该说“再见”。 我刚刚开始使用 Javascript，所以任何帮助将不胜感激。 谢谢

代码如下：

var myswitch = document.getElementsByTagName("myonoffswitch");
var mytextarea= document.getElementsByTagName("mytextarea");
myswitch.onchange = function()
      if(this.checked)
        mytextarea.value = "Hello"
      else
        mytextarea.value = "Goodbye"
    

【问题讨论】：

html myonoffswitch & mytextarea 中的哪个标签？发布您的标记也会有所帮助。

感谢大家的回答。它们实际上都有效；我想在 Javascript 中有很多方法可以做到这一点。

【参考方案1】：

如果你的控件是一个表单，你可以做一些非常简单的事情，比如：

<form>
  <textarea name="ta"></textarea>
  <input type="checkbox" onclick="
    this.form.ta.value = this.checked? 'Hello':'Goodbye';
  ">
</form>

请注意，将 change 事件与复选框一起使用意味着在某些浏览器中，在复选框失去焦点之前不会调度事件，因此最好使用 click 事件。

【参考方案2】：

您应该使用document.getElementById 而不是getElementsByTagName

我无法从您的代码 sn-p 判断您是否已将代码包装在 onload 函数中。如果您的 DOM 元素在您的 javascript 运行时未加载到 HTML 中，则需要这样做

这是一个例子

window.onload = function () 
    var myswitch = document.getElementById("myonoffswitch");
    var mytextarea = document.getElementById("mytextarea");
    myswitch.onchange = function () 
        if (this.checked) 
            mytextarea.value = "Hello";
         else 
            mytextarea.value = "Goodbye";
        
    
    //code here

这里有一个小提琴：http://jsfiddle.net/C4jVG/

【参考方案3】：

我尝试了一些东西。这应该适合你

HTML

<input type="checkbox" id="myonoffswitch">Switch</input>
<textarea id="mytextarea" cols="30" rows="10"></textarea>

Javascript

function fillText() 
        var myswitch = document.getElementById("myonoffswitch");
        var mytextarea= document.getElementById("mytextarea");
        myswitch.onchange = function()
            if(this.checked)
                mytextarea.value = "Hello"
            else
                mytextarea.value = "Goodbye"
            
        
    
    window.onload = fillText;

【参考方案4】：

只需尝试将代码中的 getElementsByTagName 替换为 getElementById 即可解决您的问题。