使用uinapp实现div标签输入框无限输入字符可换行自动识别高度，附加完整代码

这里是一个使用uinapp实现div标签输入框无限输入字符可换行自动识别高度的示例代码：

<template>
  <view>
    <view class="input-wrapper">
      <textarea class="input" v-model="content" @input="handleInput"></textarea>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        content: ''
      };
    },
    methods: {
      handleInput(e) {
        this.content = e.detail.value;
      }
    }
  };
</script>

<style>
  .input-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .input {
    width: 90%;
    height: auto;
    min-height: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    resize: none;
  }
</style>

在这段代码中，我们使用了<textarea>标签来实现输入框，通过v-model指令将输入框的值绑定到content属性上，同时通过@input事件监听输入框内容的变化，并将最新的内容更新到content属性中。样式部分设置了输入框的基本样式，包括宽度、高度、边框、圆角等。

这样就实现了一个可以无限输入字符、可换行并自动识别高度的输入框。您可以将以上代码复制到您的uinpapp项目中进行测试。希望对您有帮助！

这里是一个使用div标签实现可输入无限字符、可换行并自动识别高度的示例代码：

<template>
  <view>
    <div
      ref="input"
      class="input"
      contenteditable
      @input="handleInput"
    ></div>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        content: ''
      };
    },
    methods: {
      handleInput() {
        this.content = this.$refs.input.innerText;
        this.$refs.input.style.height = this.$refs.input.scrollHeight + 'px';
      }
    }
  };
</script>

<style>
  .input {
    width: 90%;
    min-height: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    outline: none;
    overflow: hidden;
    white-space: pre-wrap;
  }
</style>

在这段代码中，我们使用了一个<div>标签来实现可输入的文本区域，通过设置contenteditable属性为true，使该div可编辑。通过@input事件监听div内容的变化，更新content属性的值，并根据div的scrollHeight自动调整其高度。

样式部分设置了输入框的基本样式，包括宽度、最小高度、内边距、边框、圆角等。同时，设置了white-space: pre-wrap;让div支持换行。

这样就实现了一个使用div标签实现可输入无限字符、可换行并自动识别高度的输入框。您可以将以上代码复制到您的项目中进行测试。希望对您有帮助！

下面是根据您的需求修改后的代码，实现在一个<div>中输入批量提交的地址，每行一个地址：

<template>
  <view>
    <div
      v-model="addressList"
      ref="input"
      class="input"
      contenteditable
      @input="handleInput"
    ></div>
    <button @click="submitAddresses">提交地址</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        addressList: ''
      };
    },
    methods: {
      handleInput() {
        this.addressList = this.$refs.input.innerText;
        this.$refs.input.style.height = this.$refs.input.scrollHeight + 'px';
      },
      submitAddresses() {
        const addresses = this.addressList.split('\n').filter(address => address.trim() !== '');
        console.log('提交的地址列表:', addresses);
        // 在这里可以将地址列表提交到后端或执行其他操作
      }
    }
  };
</script>

<style>
  .input {
    width: 90%;
    min-height: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    outline: none;
    overflow: hidden;
    white-space: pre-wrap;
    margin-bottom: 10px;
  }
</style>

在这段代码中，我们添加了一个按钮用于提交地址列表。在submitAddresses方法中，我们首先通过\n将输入的内容分割成地址数组，然后过滤掉空白行，最后打印出地址列表。您可以在submitAddresses方法中进行实际的提交操作。

这样就实现了在一个<div>中输入批量提交的地址，每行一个地址的功能。希朝对您有帮助！

下面是根据您的需求添加地址提示功能后的代码：

<template>
  <view>
    <div
      v-model="addressList"
      ref="input"
      class="input"
      contenteditable
      @input="handleInput"
      @focus="clearPlaceholder"
      @blur="restorePlaceholder"
    >请输入地址，一行一个地址</div>
    <button @click="submitAddresses">提交地址</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        addressList: '请输入地址，一行一个地址'
      };
    },
    methods: {
      handleInput() {
        this.addressList = this.$refs.input.innerText;
        this.$refs.input.style.height = this.$refs.input.scrollHeight + 'px';
      },
      clearPlaceholder() {
        if (this.addressList === '请输入地址，一行一个地址') {
          this.addressList = '';
        }
      },
      restorePlaceholder() {
        if (this.addressList === '') {
          this.addressList = '请输入地址，一行一个地址';
        }
      },
      submitAddresses() {
        const addresses = this.addressList.split('\n').filter(address => address.trim() !== '');
        console.log('提交的地址列表:', addresses);
        // 在这里可以将地址列表提交到后端或执行其他操作
      }
    }
  };
</script>

<style>
  .input {
    width: 90%;
    min-height: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    outline: none;
    overflow: hidden;
    white-space: pre-wrap;
    margin-bottom: 10px;
  }
</style>

在这段代码中，我们添加了一个提示文本“请输入地址，一行一个地址”，并在输入框获取焦点时清空提示文本，失去焦点时恢复提示文本。这样用户在输入地址时就可以清晰地知道需要输入什么内容。

希望这个修改后的代码符合您的需求！如果有其他问题或需求，请随时告诉我。