微信小程序-textarea获取输入值(利用表单按钮)

textarea可以bindconfirm(键盘输入完成时执行)也可bindinput(键盘输入时执行)这些在手机上都依赖于小键盘,如果加一个按钮完成将textarea的值传递都逻辑层呢。可以借助表单的bindsubmit。

 

wxml

      <form bindsubmit='bindFormsubmit'>
        <textarea bindconfirm="confirm" auto-height placeholder="输入待办事项" auto-focus='true' name="textarea" />
        <button  id="addTask" form-type='submit'>输入完成</button>
      </form>

js

bindFormsubmit:function(e)
 {
   if ((e.detail.value.textarea)!="")
   {
     arrayincp.push(e.detail.value.textarea)
     this.setData({
       array: arrayincp,
       input: false,
       condition1: true,
       condition2: false,
       nav1: "nav1",
       nav2: "nav2"
   })
   }
}

 

微信小程序中的 `textarea` 组件提供了 `confirm-type` 属性,用于设置键盘右下角按钮的样式和功能(例如“发送”、“搜索”等),但在实际开发过程中,开发者可能会遇到该属性失效的问题。以下是一些可能的原因和解决方法: ### 1. 确保基础库版本支持 首先,确认使用的微信小程序基础库版本是否支持 `confirm-type` 属性。某些较旧版本的小程序基础库可能不完全支持该属性,建议将基础库更新至最新版本以确保兼容性。 ```json { "minimumWechatVersion": "2.10.4" } ``` ### 2. 正确使用 `confirm-type` 属性 在 WXML 中正确设置 `confirm-type` 的,仅支持以下几种类型:`send`、`search`、`next`、`go`、`done`。如果输入了不支持的,该属性可能不会生效。 ```html <textarea confirm-type="send" placeholder="请输入内容"></textarea> ``` ### 3. 处理 `confirm` 事件 即使 `confirm-type` 设置正确,也需要为 `textarea` 绑定 `bindconfirm` 事件,以响应用户点击键盘右下角按钮的操作。若未绑定该事件,虽然按钮显示正常,但点击后不会有任何效果。 ```html <textarea confirm-type="send" bindconfirm="onConfirm"></textarea> ``` 对应的 JS 代码如下: ```javascript Page({ onConfirm(e) { console.log("用户点击了发送按钮"); // 在此处处理发送逻辑 } }); ``` ### 4. 避免与其他组件冲突 在页面中同时存在 `input` 和 `textarea` 组件时,可能会出现焦点管理混乱或事件优先级问题。可以通过控制焦点切换顺序或监听 `focus`、`blur` 事件进行干预[^3]。 ### 5. 使用 `form` 表单提交代替 如果需要在点击 `confirm` 按钮时触发表单提交,建议将 `textarea` 放入 `form` 组件中,并使用 `form` 的 `bindsubmit` 事件来统一处理提交逻辑,这样可以避免因 `textarea` 自身事件处理延迟导致的问题[^3]。 ```html <form bindsubmit="onFormSubmit"> <textarea confirm-type="send" name="content"></textarea> <button formType="submit">发送</button> </form> ``` ```javascript Page({ onFormSubmit(e) { const content = e.detail.value.content; console.log("提交内容:", content); } }); ``` ### 6. 替代方案:自定义输入框实现高级交互 如需更复杂的交互,例如支持 `@人员` 样式或其他富文本功能,则无法依赖原生 `textarea` 或 `input` 组件。此时应考虑使用 `view` + `text` 结合 `contenteditable` 思路模拟输入区域,并通过 JavaScript 控制光标位置与输入内容,尽管微信小程序本身并不支持 `contenteditable` 属性[^2]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值