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 组件来实现一个按钮弹出输入框的功能。

首先，在需要弹出输入框的页面中引入 Dialog 和 Input 组件：

<template>
  <div>
    <el-button type="primary" @click="showInputDialog">弹出输入框</el-button>
    <el-dialog
      title="输入框"
      :visible.sync="inputDialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form>
        <el-form-item label="请输入内容">
          <el-input v-model="inputValue" autofocus></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="inputDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmInput">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputDialogVisible: false,
      inputValue: "",
    };
  },
  methods: {
    showInputDialog() {
      this.inputDialogVisible = true;
    },
    handleClose(done) {
      if (this.inputValue === "") {
        this.$message.warning("输入内容不能为空！");
        done(false);
        return;
      }
      done();
    },
    confirmInput() {
      // 在这里处理输入内容
      console.log("输入内容为：" + this.inputValue);
      this.inputDialogVisible = false;
    },
  },
};
</script>

在这个示例中，我们通过按钮的点击事件来控制 Dialog 的显示和隐藏，使用 Input 组件来实现输入框，通过 Dialog 的 `before-close` 事件来判断输入内容是否为空，最后在“确定”按钮的点击事件中处理输入内容。

需要注意的是，为了让输入框自动获得焦点，我们在 Input 组件上加了 `autofocus` 属性。如果你不需要这个功能，可以去掉这个属性。

此外，还可以通过 Dialog 的 `width` 属性来设置输入框的宽度，通过 `slot="footer"` 来自定义 Dialog 的底部按钮区域。