Question

如果您有更好的选择，请编辑标题。我想不出一个说这个的好方法。简而言之，我有两个表单字段值转到resultCell元素。

这样做有效，但如果结果文本中没有cellInput和cellSelection的值，我还需要它才能完全删除。

非常感谢任何帮助。

HTML

<input type='text' id='cellInput'/>
<select id='cellSelection'>
 <option value='@tmomail.next'>TMobile</option>
 <option value='@vzwireless.com'>Verizon</option>
</select>
<input type='text' id='resultCell'>

的Javascript

 var cellIn = document.getElementById('cellInput');
 var dropdown = document.getElementById('cellSelection');
 var textbook = document.getElementById('resultCell');
 dropdown.addEventListener('change', function(){
                           textbook.value = cellIn.value + dropdown.value;
                          });

Answer 1

试试这个：

....
if(cellIn.value && dropdown.value){
    textbook.value = cellIn.value + dropdown.value;
}else{
    textbook.value = "";
}
....

或简短版本：

 textbook.value = (cellIn.value && dropdown.value) ? (cellIn.value + dropdown.value) : "";

Answer 2

您只需要检查输入的长度并确保它之前不是0 你产生了结果。由于您的下拉列表具有静态设置值，因此您无需担心它。

此外，如果您打算使用输入的两个值进行数学计算，则必须解析输入中的数字（使用parseInt()和/或parseFloat()），因为所有数据都是HTML中的字符串。如果你不这样做，你将得到连接，而不是添加。

最后，您的结果单元格当前是input元素，但如果您只想显示结果，则不需要这样做。事实上，它不是input更好，因为它不允许用户更改它。

＆＃13;

var cellIn = document.getElementById('cellInput');
var dropdown = document.getElementById('cellSelection');
var textbook = document.getElementById('resultCell');
 
dropdown.addEventListener('change', function(){
   
   // Always reset the result area
   textbook.textContent = "";

   // Always call trim on text fields to remove accidentally added
   // leading or trailing spaces. Once trimmed, you can check the
   // length of the result and if it is greater than 0, there is input.
   var val1 = cellIn.value.trim();

   if(val1.length > 0){
     textbook.textContent = val1 + dropdown.value;
   } 
});

＆＃13;

#resultCell {
  border:1px solid grey;
  background-color:#e0e0e0;
  display:inline-block;
  width:250px;
  height:1em;
  vertical-align:bottom;
  padding:2px;
}

＆＃13;

<input type='text' id='cellInput'/>
<select id='cellSelection'>
 <option value='@tmomail.next'>TMobile</option>
 <option value='@vzwireless.com'>Verizon</option>
</select>
<span id='resultCell'></span>

＆＃13;

但是，更好的用户体验是仅在第一个输入字段包含数据时启用下拉菜单。防止用户做错事总是更好，而不是修复UI以响应用户做错事。

＆＃13;

var cellIn = document.getElementById('cellInput');
var dropdown = document.getElementById('cellSelection');
var textbook = document.getElementById('resultCell');
 
dropdown.addEventListener('change', function(){
   
   // Always reset the result area
   textbook.textContent = "";

   // Always call trim on text fields to remove accidentally added
   // leading or trailing spaces. Once trimmed, you can check the
   // length of the result and if it is greater than 0, there is input.
   var val1 = cellIn.value.trim();

   if(val1.length > 0){
     textbook.textContent = val1 + dropdown.value;
   } 
});

// Enable/disable the dropdown based on whether the input has any data
cellIn.addEventListener("input", function(){
   // Always reset the result area
   textbook.textContent = "";

  dropdown.disabled = this.value ? false : true;
});

＆＃13;

#resultCell {
  border:1px solid grey;
  background-color:#e0e0e0;
  display:inline-block;
  width:250px;
  height:1em;
  vertical-align:bottom;
  padding:2px;
}

＆＃13;

<input type='text' id='cellInput'>
<select id='cellSelection' disabled="disabled">
 <option value='@tmomail.next'>TMobile</option>
 <option value='@vzwireless.com'>Verizon</option>
</select>
<span id='resultCell'></span>

＆＃13;

如果来自其他输入的两个值都不在其中，则删除结果输入

2 个答案: