SOURCE

$(".peinput").keyup(function() {
  var d = $(this).attr('d');
  var base = $("#base_input").val();
  var pevalue = $(this).val();
  if (isNaN(base)) {
    alert("基数必须是数字");
    return;
  }
  if (isNaN(pevalue)) {
    alert("请填写数字");
    $(this).focus();
    return;
  }
  if (d == 'px') {
    var finalv = pevalue / base;
    finalv = finalv.toFixed(0);
    $("#output_value").val(finalv);
    $("#dw").text('(em)');
  } else {
    var finalv = pevalue * base;
    finalv = finalv.toFixed(0);
    $("#output_value").val(finalv);
    $("#dw").text('(px)');
  }
  $("#output_value").focus();
});

<div class="container">
  <div class="panel-body" id="contain">
    <div class="input-group row">
      <span class="input-group-addon" id="basic-addon1">
        PX基数:
      </span>
      <input type="text" class="form-control" style="width: 120px;" id="base_input"
      value="16">
    </div>
    <div class="row">
      <input type="text" class="form-control conv peinput" d='px' id="px_input"
      placeholder="请输入px">
      <button class="btn-primary btn" disabled="disabled" style="float: left;margin-left: 5px;margin-right: 5px;">
        or
      </button>
      <input type="text" class="form-control conv peinput" d='em' id="em_input"
      placeholder="请输入em">
    </div>
    <div class="input-group row">
      <span class="input-group-addon" id="basic-addon1">
        转换后的结果
        <span id="dw">
        </span>
        :
      </span>
      <input type="text" class="form-control" style="width: 120px;" id="output_value">
    </div>
  </div>

.conv {
  width: 120px;
  float: left;
}

#contain .row {
  margin: 20px;
}