Question

我正在制作一个具有两个输入字段的单位转换器，一个输入字段为厘米，另一个输入字段为英寸。我想知道是否有可能将其中一个字段更改为仅在另一个字段中有输入时才读取。这是我对以下字段之一的代码： href。

任何帮助将不胜感激。谢谢！

Answer 1

这将是一个很好的起点。

let cmInput = document.getElementById("cminput");
let inInput = document.getElementById("inchinput");

cmInput.onkeyup = function(){
  if(cmInput.value !== ""){
    inInput.disabled = true;
  }else{
    inInput.disabled = false;
  }
};

inInput.onkeyup = function(){
  if(inInput.value !== ""){
    cmInput.disabled = true;
  }else{
    cmInput.disabled = false;
  }
};

<input type="text" placeholder="centimetres" id="cminput">
<input type="text" placeholder="inches" id="inchinput">

Answer 2

这不是最干净的方法，但是它可以工作，只是添加您的转换逻辑。当输入字段为空时，这也会删除只读属性 jsfiddle (click me)

<label for="cm">cm: </label>
<input name="cm" id="cm" class="inputs peach Calibri" type="number" min="0" step="1" />


<label for="inch">inch: </label>
<input name="inch" id="inch" class="inputs peach Calibri" type="number" min="0" step="1" />

$('#cm').on('keyup', function() {

  if ($('#cm').val() != '') {
    $('#inch').prop('readonly', true);

  } else if ($('#cm').val() == '') {
    $('#inch').prop('readonly', false);
  }

});

$('#inch').on('keyup', function() {

  if ($('#inch').val() != '') {
    $('#cm').prop('readonly', true);

  } else if ($('#inch').val() == '') {
    $('#cm').prop('readonly', false);
  }

});

Answer 3

您会为此考虑其他模式吗？

只读解决方案是很直接的，但是很多站点不仅具有数字转换，例如google translation，还使用按钮切换转换，使转换器控件的右侧保留只读，所以如果您想要做这样的事情以遵循更标准的模式

在这里

$('button').on('click',function(){
  $('.cont').toggleClass('invert')   
});
$('input').on('keypress',function(){
  if($('.cont').hasClass('invert')){
    // some convertion code for INCH to CM
  }else{
    // some convertion code for CM to INCH
  }
});

.cont{
  display:flex;
  align-items: center;
  justify-content: center;
  border:1px solid silver;
  
}
.cont.invert{
  flex-direction: row-reverse;
}
fieldset{
  border:none;
  position:relative;
}
button{
  display: block;
  line-height: 22px;
}
.cont.invert fieldset:first-child:after{
  content:"";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top:0px;
  background-color: rgba(255,255,255,.3);
}
.cont.invert fieldset:last-child:after{
  display: none;
}
.cont fieldset:last-child:after{
  content:"";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top:0px;
  background-color: rgba(255,255,255,.3);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
    <fieldset>
      <label for="inp1">CM</label>
      <br>
      <input type="text">
    </fieldset>
    <button>
        < >  
    </button>
    <fieldset>
      <label for="inp1">INCH</label>
      <br>
      <input type="text">
    </fieldset>
</div>

如您所见，我没有禁用输入，我使用了一个块将其覆盖，使其无法编辑，右侧输入上方的块具有白色背景，上面带有Alpha，这样，如果您愿意，您可以可以控制“禁用”的方式，无需触摸输入的CSS，并且在每个浏览器上看起来都一样。

希望这会有所帮助

Answer 4

您可以像这样在oninput上调用js函数：

<input type="text" id="cm" oninput="input('cm')"/>
<input type="text" id="inch" oninput="input('inch)"/>

function input(which){
    if(which === 'cm'){
        if(document.getElementById('cm').value!= ''){
            document.getElementById('inch').disabled = true;
        }else{
            document.getElementById('cm').disabled = false;
        }
    }else{
        if(document.getElementById('inch').value!= ''){
            document.getElementById('cm').disabled = true;
        }else{
            document.getElementById('inch').disabled = false;
        }
    }
}

如何基于花药输入字段将输入字段设为只读？

4 个答案: