uniapp微信小程序设置textarea回车不换行

要实现textarea回车不换行，需要在textarea标签中添加一个属性：`@input="$event.target.value=$event.target.value.replace(/\n/g,'')"`

具体实现步骤如下：

1. 在WXML中，添加一个textarea标签，并设置其绑定的变量值：

<view style="padding: 10px;">
  <textarea placeholder="请输入内容" value="{{content}}" bindinput="onInput" @input="$event.target.value=$event.target.value.replace(/\n/g,'')"></textarea>
</view>

2. 在JS中，定义一个onInput方法，用于监听textarea的输入事件：

Page({
  data: {
    content: ''
  },
  onInput: function(e) {
    this.setData({
      content: e.detail.value
    })
  }
})

通过在textarea标签中添加`@input="$event.target.value=$event.target.value.replace(/\n/g,'')"`, 可以实现输入回车不换行的效果。

相关问题

uniapp小程序 textarea回车不换行

你可以在 `textarea` 组件上设置 `auto-height` 属性为 `true`，这样回车键就会换行了。示例代码如下：

<template>
  <textarea v-model="content" auto-height></textarea>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    }
  }
}
</script>

如果你不想使用 `auto-height` 属性，也可以通过监听 `keydown` 事件来实现回车键换行的功能。示例代码如下：

<template>
  <textarea v-model="content" @keydown.enter.prevent="handleEnter"></textarea>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    }
  },
  methods: {
    handleEnter() {
      this.content += '\n'
    }
  }
}
</script>

在这个示例中，我们通过监听 `keydown.enter` 事件来捕获回车键，然后使用 `prevent` 修饰符来阻止默认的换行行为。在事件处理函数中，我们将回车键转换为换行符 `\n` 并添加到文本框中。

微信小程序 textarea 让placeholder换行

微信小程序的 `textarea` 组件默认不会让 placeholder 文本自动换行，因为它是按照一行显示文本的。如果你想要实现 placeholder 换行效果，可以采用一种技巧，即自定义样式并设置 `line-height` 和 `white-space` 属性。

首先，在你的 `.wxml` 文件中，保持 textarea 的基本结构不变：

<view class="custom-textarea">
  <textarea placeholder="这是一段很长的占位符，需要换行" bindinput="handleInput"></textarea>
</view>

然后，在对应的 `.wxss` 或者全局 CSS 文件中添加样式：

.custom-textarea {
  position: relative;
}

.custom-textarea textarea {
  position: absolute;
  width: 100%;
  height: 100%;
  outline: none; /* 防止输入框边框 */
  resize: none; /* 禁止调整大小 */
  
  /* 自定义样式 */
  color: transparent;
  font-size: 0;
  white-space: pre-line; /* 设置文本允许换行 */
  line-height: normal; /* 使用正常的行高 */
}

通过这样的设置，当用户聚焦到 textarea 时，尽管文本区域看起来还是单行的，但 placeholder 文字会换行显示。然而，这种做法仅适用于占位提示，实际输入的文本会被视为一个整体，不会有自动换行。