前端当两个输入框关联时,改变第一个输入框的值,第二个输入框清空

可以通过监听第一个输入框的`change`事件来实现这个功能，代码如下：

<input id="input1" type="text">
<input id="input2" type="text">

const input1 = document.getElementById('input1');
const input2 = document.getElementById('input2');

input1.addEventListener('change', () => {
  input2.value = '';
});

当第一个输入框的值发生改变时，`change`事件会触发，此时我们清空第二个输入框的值即可。

相关问题

vue两个绑定不同内容的输入框，清空一个输入框，另一个也跟着清空

可以使用 `v-model` 指令和一个 computed 属性来实现这个功能。

假设你有两个输入框，分别是 `input1` 和 `input2`，它们都绑定到了一个名为 `text` 的变量上。你需要在 `computed` 属性中定义一个新的变量 `textCopy`，它的值与 `text` 相同。然后，当你清空 `input1` 中的内容时，只需要将 `text` 变量清空即可，因为 `input2` 中的内容是绑定到 `textCopy` 上的，所以它也会跟着清空。

示例代码如下：

<template>
  <div>
    <input v-model="text" type="text" id="input1">
    <input v-model="textCopy" type="text" id="input2">
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '',
      textCopy: ''
    }
  },
  computed: {
    // 定义一个新的变量 textCopy，它的值与 text 相同
    textCopy: {
      get() {
        return this.text
      },
      set(value) {
        this.text = value
      }
    }
  },
  methods: {
    clearInput() {
      // 清空 input1 中的内容，input2 会自动跟着清空
      this.text = ''
    }
  }
}
</script>

上面的代码中，当你在 `input1` 中输入内容时，它会自动同步到 `text` 中，然后 `computed` 属性中的 `textCopy` 又会同步到 `input2` 中。当你清空 `input1` 中的内容时，只需要清空 `text` 变量即可。由于 `textCopy` 是与 `text` 绑定的，所以它也会跟着清空，从而实现了你想要的功能。

uniapp清空输入框的值

在 uni-app 中清空输入框的值，可以通过以下两种方式实现：

1. 通过双向绑定清空

在模板中，可以使用 `v-model` 将输入框的值与组件实例中的变量进行双向绑定，当需要清空输入框时，只需要将该变量值设置为空字符串即可。

<template>
  <input type="text" v-model="inputValue" />
  <button @click="clearInput">清空</button>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    clearInput() {
      this.inputValue = ''
    }
  }
}
</script>

2. 通过组件引用清空

在组件中，可以通过 `$refs` 引用输入框组件，并调用其 `setValue` 方法将输入框值设置为空字符串。

<template>
  <input type="text" ref="input" />
  <button @click="clearInput">清空</button>
</template>

<script>
export default {
  methods: {
    clearInput() {
      this.$refs.input.setValue('')
    }
  }
}
</script>

需要注意的是，第二种方法需要在输入框组件中定义 `setValue` 方法，调用该方法时才能清空输入框的值。