根据在另一个字段中输入的数据自动填充字段

Question

我需要使用来自其他两个字段的值填充字段。

第一个只是一个纯文本字段。第二个是包含年份的选择字段（例如2017年，2018年等）。

因此，当您在文本字段中输入内容时，在按键上它还应该更新要填充的字段。

当选择字段发生变化时，所选值应附加为“-2017”作为示例。

我需要的另一件事是如果在文本字段中输入空格，则在字段中替换以填充“ - ”。输入的任何非字母数字字符都将被忽略。

我想我在这里问了很多 - 但是非常感谢任何帮助。

Answer 1

复制/可通过代码，不应与页面上的其他JS交互不良。仅适用于一组元素。

var outputController = (function(){

  function getYear(){
  
    return document.getElementById('selectField').value;
  
  }
  
  function getText(){
  
    return document.getElementById('textField').value;
  
  }
  
  function applyFields(text, year){
  
      document.getElementById('output').value = text().trim().replace(/[^a-zA-Z\d\s]/g, '').replace(/ /g, '-').toLowerCase()+'-'+year();
  
  }
  function setListeners(){
  
      document.getElementById('textField').addEventListener('keyup', function(){
      
          applyFields(getText, getYear);
      
      });
      
      document.getElementById('selectField').addEventListener('change', function(){
      
          applyFields(getText, getYear);
      
      });
  
  }
  
  return {
  
    init: function(){
    
      setListeners();
    
    }
  
  }

})();

outputController.init();

.inputWrapper {

  width: 100%;
  text-align: center;
  margin-bottom: 1em;

}

#output {

  display: block;
  width: 90%;
  margin: 0 auto;
  height: 50px;

}

<div class="inputWrapper">
<input id="textField"></input>
<select id="selectField">
<option>2017</option>
<option>2016</option>
<option>2014</option>
</select>
</div>
<textarea type="textarea" id="output"></textarea>