使用JavaScript将文本插入到选定的文本框中

Question

使用JavaScript将文本插入到选定的文本框中

3

我有2个文本框和1个按钮！我想将文字插入到其中一个文本框中。当我点击 textbox_1 并单击按钮时，我的文本将出现在 textbox_1 中。当我点击 textbox_2 并单击按钮时，我的文本将出现在 textbox_2 中。如何使用JavaScript实现这一点？请帮助我！我是JavaScript的新手！

- KhoiNguyen

4个回答

2

<html>
<head>
    <script type="text/javascript">
        var index = false;
        var text = "This text shifts to text box when clicked the button";
        
        function DisplayText(){
            if(!index){
                document.getElementById("txt1").value = text;
                document.getElementById("txt2").value = "";
            }
            else{
                document.getElementById("txt2").value = text;
                document.getElementById("txt1").value = "";
            }
        
            index = index ? false : true;
        }
   </script>
</head>
<body>
    <input type="text" id="txt1"/>
    <input type="text" id="txt2"/>
    <input type="button" value="Change Text" onclick="DisplayText()"/>
</body>
</html>

- MSRS

1

看一下 INPUT 标签的 onFocus() 属性 - 并考虑跟踪最后一个获得焦点的内容。我有点含糊不清，因为这听起来很像作业。

- JTeagle

谢谢！但你能解释得更详细一些吗？我有一个包含多个文本字段输入的HTML表单。当我点击按钮时，它会将文本插入到我之前聚焦的textBox中，我可以使用onBlur事件来处理我的textBox吗？ - KhoiNguyen

点击按钮是填充文本框的触发器，因此不需要使用onBlur()。如果您记得哪个文本框最后获得了焦点 - 通过为每个框编写一个onFocus()处理程序并使用全局变量 - 那么当您单击按钮并处理其onClick()时，您将知道在哪个框中编写文本。 - JTeagle

1

这并不是最优美/最精致的解决方案，但它有效并且您可以在此基础上构建以满足您的需求。

<script>
var field = 0;
  function addText(txt){
     if(field === 0) return false;
     field.value = txt;
  }
</script>

对于这样的表单

<form>
<input type="text" name="box1" id="box1" onfocus="field=this;" />
<input type="text" name="box2" id="box2" onfocus="field=this;" />
<input type="button" onclick="addText('Hello Thar!');" />
</form>

- S Morgan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tejasva Dhyani · Accepted Answer

请将两个文本框的id分别设为textbox_1和textbox_2，在<button>标签上加上onclick='onCLickButton();'，并在脚本中写入以下代码：

var text_to_be_inserted = "sample";
function onCLickButton(){
    document.getElementById("textbox_1").value='';
    document.getElementById("textbox_2").value='';
    if(document.getElementById("textbox_1").focused){
        document.getElementById("textbox_1").value=text_to_be_inserted;
    }
    else if(document.getElementById("textbox_2").focused){
        document.getElementById("textbox_2").value=text_to_be_inserted;
    }
    else{
        // do nothing
    }
}

已编辑

请接受我的道歉，实际上我习惯于使用这些函数，因为我有自己的js文件包含这些函数。

请在<input>标签中添加onfocus='onFocusInput(this);'，并将以下代码添加到脚本中：

function onFocusInput(object){
    document.getElementById("textbox_1").focused=false;
    document.getElementById("textbox_2").focused=false;
    object.focused = true;
}