在微信小程序开发中如何使在弹出的输入框中输入的值在页面中排列？且使输入框自动清空。

监听事件中去处理，输入完后，清空文本框中的内容就可以了。

Page({
  data: {
    inputValue: '' // 输入框的初始值为空
  },
  
  onInput: function(e) {
    this.setData({
      inputValue: e.detail.value // 更新输入框的值
    });
  },
  
  onConfirm: function() {
    // 将输入框的值添加到显示容器中，并清空输入框
    var value = this.data.inputValue;
    if (value) {
      var inputValues = this.data.inputValues || [];
      inputValues.push(value);
      this.setData({
        inputValues: inputValues,
        inputValue: ''
      });
    }
  }
});

没看懂你想要表达的问题，自动排列是指什么？

你需要把你想要达到的效果简单画一下，这样更方便精准解答

在 WXML 文件中，添加一个按钮或触发弹出输入框的元素。

<!-- 页面中的触发按钮 -->
<button bindtap="showInputModal">弹出输入框</button>

<!-- 显示输入框的弹窗 -->
<view class="modal" wx:if="{{showModal}}">
  <input type="text" placeholder="请输入内容" bindinput="handleInput" value="{{inputValue}}" />
  <button bindtap="addToList">添加到列表</button>
</view>

<!-- 显示输入内容列表 -->
<view class="content">
  <block wx:for="{{inputList}}" wx:key="index">
    <view>{{item}}</view>
  </block>
</view>

在 JS 文件中，处理输入框弹出和值的处理逻辑：

Page({
  data: {
    showModal: false, // 控制弹窗显示隐藏
    inputValue: '',  // 输入框的值
    inputList: []    // 存储输入内容的列表
  },

  // 弹出输入框
  showInputModal() {
    this.setData({
      showModal: true
    });
  },

  // 处理输入框输入事件
  handleInput(e) {
    this.setData({
      inputValue: e.detail.value
    });
  },

  // 添加输入内容到列表
  addToList() {
    const inputValue = this.data.inputValue;
    if (inputValue) {
      const inputList = this.data.inputList;
      inputList.push(inputValue);
      this.setData({
        inputList,
        inputValue: '', // 清空输入框的值
        showModal: false // 关闭弹窗
      });
    }
  }
});

在微信小程序开发中，你可以使用<input>组件来实现弹出的输入框，并使用bindinput事件监听输入框的输入，使用bindconfirm事件监听输入框的确认按钮点击事件。以下是一个示例代码：

在index.wxml文件中，添加一个<input>组件和一个显示输入值的<text>组件。例如：

<view class="container">
  <input confirm-type="done" placeholder="请输入内容" bindinput="bindInput" bindconfirm="bindConfirm" />
  <text>{{inputValue}}</text>
</view>

在index.js文件中，实现bindInput和bindConfirm事件的处理函数。例如：

Page({
  data: {
    inputValue: ''
  },

  bindInput: function (e) {
    this.setData({
      inputValue: e.detail.value
    });
  },

  bindConfirm: function () {
    // 在这里清空输入框
    this.setData({
      inputValue: ''
    });

    // 在这里处理输入的值，例如将输入的值添加到页面中
    var inputValue = this.data.inputValue;
    var content = this.data.content;
    this.setData({
      content: content + '\n' + inputValue
    });
  }
});

在index.wxss文件中，为输入框和页面添加一些样式。例如：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
}

input {
  border: 1px solid #999;
  padding: 10px;
  margin-bottom: 20px;
}

text {
  font-size: 24px;
  margin-bottom: 20px;
}

现在，当你在输入框中输入内容并点击确认按钮时，输入的值将在页面中排列，同时输入框会自动清空。你可以根据自己的需求对示例代码进行修改。

aligin item
justine content
或者用js动态改css

微信小程序输入框点击清空按钮清空值_微信小程序输入框清空_盲钼的博客-CSDN博客点击右侧的清空按钮，实现输入框的值清空。第一步：输入框设置value="{{inputValue}}"。手机号 .._微信小程序输入框清空

https://blog.csdn.net/Y1058144/article/details/108280758

微信小程序把输入框的值点击确认添加到页面上得步骤

微信小程序中，在输入框中输入的内容，需要通过事件监听（如bindconfirm）来实现确认添加到页面上的功能。当用户在输入框中输入完成后，点击键盘上的确认按钮，就会触发bindconfirm事件，此时我们可以通过event.detail.value获取到输入框中的值，然后将其添加到页面上。
这样设计的原因是因为，在输入框中输入的内容可能会有多个，如果每输入一个内容就直接添加到页面上，会使页面变得冗余，同时也不利于数据的管理和处理。因此，我们可以通过监听输入框的事件，将输入的内容先存储到一个数组或对象中，再一次性地将其添加到页面上，可以更好地控制数据和页面的展示。
此外，在实现确认添加功能时，需要注意输入框的值是否为空，是否符合要求等，以保证输入的内容的正确性和完整性。同时，也可以对输入框进行格式限制、输入限制等操作，以提高用户的输入效率和体验。