html点击按钮弹出输入框

你可以使用HTML中的 `<button>` 元素和JavaScript的 `prompt()` 函数来实现点击按钮弹出输入框。

以下是一个示例代码：

<button onclick="myFunction()">点击我</button>

<script>
function myFunction() {
  var input = prompt("请输入您的姓名：");
  alert("您好，" + input + "！");
}
</script>

当用户点击按钮时，`myFunction()` 函数会被调用，弹出一个输入框让用户输入姓名。用户输入完成后，会弹出一个包含输入姓名的欢迎消息的提示框。

相关问题

Html ： 点击按钮弹出输入框，再次点击进行隐藏

你可以使用JavaScript来实现这个功能。首先，你需要在HTML中创建一个按钮和一个输入框，并在CSS中将输入框的初始状态设置为隐藏。然后，你需要使用JavaScript来添加一个事件监听器，当按钮被点击时，输入框就会显示出来。接下来，你需要再次点击按钮时隐藏输入框。

下面是一个实现这个功能的代码示例：

HTML：

<button id="show-input">显示输入框</button>
<input type="text" id="input-box" style="display:none;">

CSS：

#input-box {
  display: none;
}

JavaScript：

const showBtn = document.getElementById('show-input');
const inputBox = document.getElementById('input-box');

showBtn.addEventListener('click', () => {
  if (inputBox.style.display === 'none') {
    inputBox.style.display = 'block';
  } else {
    inputBox.style.display = 'none';
  }
});

这个代码会给按钮添加一个事件监听器，当按钮被点击时，检查输入框的当前状态。如果输入框被隐藏，它就会显示出来，如果它正在显示，它就会被隐藏。

elementui按钮弹出输入框

你可以使用 ElementUI 的 Dialog 组件和 Input 组件来实现弹出输入框的效果。具体步骤如下：

1. 在需要添加按钮的页面中引入 ElementUI 组件库。

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

2. 在页面中添加一个 Dialog 组件和一个 Button 组件。

<template>
  <div>
    <el-button @click="showDialog">点击弹出输入框</el-button>
    <el-dialog :visible.sync="dialogVisible">
      <el-input v-model="inputValue"></el-input>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

3. 在 Vue 实例中声明 data 属性和 methods 方法。

export default {
  data() {
    return {
      dialogVisible: false,
      inputValue: ''
    }
  },
  methods: {
    showDialog() {
      this.dialogVisible = true
    },
    submit() {
      console.log(this.inputValue) // 在这里处理输入框的值
      this.dialogVisible = false
    }
  }
}

这样，点击按钮就可以弹出一个带有输入框的对话框，用户输入完毕后点击确定按钮即可。