Question

任何人都可以帮助我如何使用javascript或jquery来实现这一目标，如下所述：

说我有这个字段1

<input type="text" name="field1" value="">

然后我有了这个字段2

<input type="hidden" name="field2" value="">

我的意思是说field2应该被隐藏但是如果有人在field1中输入了一些值，那么field2会显示但是如果field1上没有值那么它会消失吗？

提前致谢并感谢您的时间和帮助

Answer 1

您获取第一个字段，检查它是否有值，并根据该字段切换第二个字段，但您不应使用隐藏输入，而是使用CSS隐藏它

＆＃13;

$('[name="field1"]').on('input', function() {
    var el = $('[name="field2"]').toggle( this.value !== "" );

    if (this.value === "") el.val("");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="field1" value="" placeholder="type something">
<br><br>
<input type="text" name="field2" value="" style="display:none">

＆＃13;

Answer 2

由于您还使用JavaScript标记了您的问题，因此似乎值得提供以下内容：

// retrieving the first - if any - element with its
// 'name' attribute equal to the value of 'field1':
var input = document.querySelector('[name=field1]');

// adding an event-listener to that element, listening
// for the 'input' event (keyup, paste, copy...) and
// assigning the method's anonymous function as the
// event-handler:
input.addEventListener('input', function(e) {
  // 'e': here unused, is a reference to the event
  // which triggered the function to be called; using
  // e.type will give the specific event, if required
  // (and other properties are, of course, available).

  // retrieving the first - if any - element with has
  // its 'name' attribute equal to 'field2':
  var conditionalInput = document.querySelector('[name=field2]');

  // if the value of the <input> element that received
  // the event has a value that, when leading and trailing
  // white-space is removed, results in a truthy
  // evaluation (the string length is non-zero):
  if (this.value.trim().length) {

    // we set the display style of the conditionally-
    // shown <input> to 'block', you could instead use
    // 'inline-block' if you prefer:
    conditionalInput.style.display = 'block';

  // otherwise, if the length of the trimmed-value is
  // zero (falsey):
  } else {

    // we set the display style of the conditionally-
    // shown <input> to 'none':
    conditionalInput.style.display = 'none';

    // and also remove its entered value:
    conditionalInput.value = '';
  }
});

var input = document.querySelector('[name=field1]');

input.addEventListener('input', function(e) {

  var conditionalInput = document.querySelector('[name=field2]');
  if (this.value.trim().length) {
    conditionalInput.style.display = 'block';
  } else {
    conditionalInput.style.display = 'none';
    conditionalInput.value = '';
  }
});

<input type="text" name="field1" value="" />

<input type="text" name="field2" value="" />

在您的HTML中请注意我已将<input>元素的type从'隐藏'调整为'文字'，这是因为某些浏览器 - 我认为主要是Internet Explorer - 具有，或者在动态更改type元素的<input>时出现问题。

如果您的用例不依赖于跨浏览器兼容性，那么您当然可以更改type（conditionalInput.type = 'text' / conditionalInput.type = 'hidden'）而不是{{1 }}

在特定输入字段上输入值时显示隐藏的输入字段

2 个答案: