oninput属性，input属性有哪几个属性值

大家好，今天来为大家解答oninput属性这个问题的一些问题点，包括input属性有哪几个属性值也一样很多人还不知道，因此呢，今天就来为大家分析分析，现在让我们一起来看看吧！如果解决了您的问题，还望您关注下本站哦，谢谢~

js如何获取input输入框中输入的值

可以用value属性获取input输入框中的值。

1、新建html文档，在body标签中添加input标签、button标签和span标签，点击按钮span标签中显示输入框中的值：

2、添加js代码，ipt、btn和val分别表示选择当前标签，onclick表示按钮点击事件，ipt.val表示获取input输入框中的值，然后将这个值赋值给span标签中的内容：

3、在输入框中输入内容，点击按钮，这时输入框中的值将会在span标签中显示：

taro input值不更新 坑

Taro Input值不更新的原因及解决方案

在 Taro框架中，微信小程序的 Input组件作为非完全受控组件时，确实可能遇到值不更新的问题。这通常是由于 Taro的 diff算法在比较新旧值时，若发现相同则不会触发重新渲染，导致视图与数据不同步。

原因分析：

非完全受控特性：微信小程序的 Input组件在用户输入时，视图会立即更新，但绑定的 value值可能还未同步到数据状态中。

Taro的 diff算法：当通过 setState设置的新值与旧值相同时，Taro会认为无需更新，从而跳过渲染过程。

异步处理问题：在 onInput事件中，如果直接对输入值进行处理并尝试更新状态，可能会因为处理后的值与原始值相同（或处理逻辑不当）而导致更新被忽略。

解决方案：

立即同步原始值：在 onInput事件中，首先立即将输入的原始值同步到状态中，确保视图与数据的一致性。

const onInput= e=>{//立即同步原始值 props.onChange(new V(e.detail.value, new Date().getTime()));//然后进行异步处理 setTimeout(()=>{ const formatValue= filterInput(e.detail.value); props.onChange(new V(formatValue, new Date().getTime()));});};使用 setTimeout延迟处理：通过 setTimeout将处理逻辑放入异步队列中，确保在原始值同步到状态后再进行处理和更新。

避免直接返回处理后的值：在 onInput事件中，不要直接返回处理后的值给 Input组件的 value属性，因为这可能导致与状态不同步的问题。应该始终通过状态来管理 value。

检查 filterInput函数：确保 filterInput函数不会返回与输入值完全相同的字符串，否则即使进行了处理，也可能因为 diff算法而忽略更新。

示例代码修正：

const onInput= e=>{ const rawValue= e.detail.value;//立即同步原始值到状态 props.onChange(new V(rawValue, new Date().getTime()));//异步处理并更新状态 setTimeout(()=>{ const formatValue= filterInput(rawValue); if(formatValue!== rawValue){//确保处理后的值与原始值不同 props.onChange(new V(formatValue, new Date().getTime()));}});//注意：不要在这里返回任何值给 Input的 value属性};通过以上方法，可以确保 Taro中的 Input组件在值变化时能够正确更新，并避免因为 diff算法而导致的问题。

关于本次oninput属性和input属性有哪几个属性值的问题分享到这里就结束了，如果解决了您的问题，我们非常高兴。