写一个文本输入框和一个按钮,点击该按钮时弹出文本输入框中的内容

用JS写一个文本输入框和一个按钮,点击该按钮时弹出文本输入框中的内容

<body>
	<input type="text" id="ipt" value="" />
	<button onclick="getValue()">弹框</button>
	<script type="text/javascript">		
		var getValue = function () {
			var value = document.getElementById("ipt").value;
			console.log(value)
			alert(value)
		}
	</script>
</body>

 

是用swing框架实现的吧。如有帮助望采纳。点击我回答右上角【采纳】按钮。

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.border.EmptyBorder;
import javax.swing.JButton;
import java.awt.*;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
import javax.swing.JLabel;
public class FrameTest extends JFrame {
    private JPanel contentPane;
    private TextField textField;
    private  JLabel lblNewLabel;
    public static void main(String[] args) {
        FrameTest frame = new FrameTest();
        frame.setVisible(true);
    }

    public FrameTest() {
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setBounds(100, 100, 350, 280);
        contentPane = new JPanel();
        contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
        setContentPane(contentPane);
        contentPane.setLayout(null);

        JButton btnNewButton = new JButton("确认");
        btnNewButton.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent arg0) {
                String string = textField.getText();
                if(!string.equals("")){
                    lblNewLabel.setText(string);
                    contentPane.remove(textField);
                    contentPane. remove(btnNewButton);
                    contentPane.updateUI();
                }
            }
        });
        textField = new TextField();
        textField.setBounds(60, 10, 237, 30);
        contentPane.add(textField);
        btnNewButton.setBounds(60, 120, 237, 30);
        contentPane.add(btnNewButton);
        lblNewLabel= new JLabel("");
        lblNewLabel.setBounds(60, 165, 237, 56);
        contentPane.add(lblNewLabel);
    }
}

简单的GUI界面和事件监听,如有需要可私信进一步协助

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> 动态创建控件 </title>
	<script type="text/javascript">
		function add(){

			alert(document.getElementById("p1").innerHTML);
			alert(document.getElementById("div1").innerHTML);
			alert(document.getElementById("item").innerHTML);
			//获取td标签
			var item = document.getElementById("item");

			//innerHTML属性可以获取非表单标签的文本内容
			//创建3个标签控件,br,file,button
			var br = document.createElement("br");
			var input = document.createElement("input");
			var btnDel = document.createElement("input");
			var input2 = document.createElement("input");
			//设置控件的名称和类型
			input2.type="text";
			input2.name="username";
			input.type="file";
			input.name="file2";
			btnDel.type="button";
			btnDel.value="删除";
			//为按钮增加单击事件(click)
			btnDel.onclick=function(){
				alert(input2.value);
				item.removeChild(br);
				item.removeChild(input2);
				item.removeChild(input);
				item.removeChild(btnDel);
			}
			//追加到td标签内部
			item.appendChild(br);
			item.appendChild(input2);
			item.appendChild(input);
			item.appendChild(btnDel);
		}
	</script>
 </head>

 <body>
  <h1>动态创建控件</h1>
  <hr>
  <table border="1" width="800">
	<tr>
		<td>文件上传</td>
		<td id="item"><input type="file" name="file1"><input type="button" name="btnAdd" value="添加" onclick="add();"></td>
	</tr>
  </table>

  <p id="p1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  <div id="div1">我是div1标签内的文本内容</div>
 </body>
</html>

 

CSS有个 display:none;隐藏属性,js在click里面可以把这个属性值修改,如果还不知道如何写,那就是完全没有基础,建议先学点基础知识在写代码。

您好,我是有问必答小助手,您的问题已经有小伙伴解答了,您看下是否解决,可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~

ps: 问答会员年卡【8折】购 ,限时加赠IT实体书,即可 享受50次 有问必答服务,了解详情>>>https://t.csdnimg.cn/RW5m