Question

我希望在用户输入字段中预定义（在“ Einkommen”字段中）文本（参见图片）。

我该怎么做？

这是我在其他字段中的代码：

<script type="text/javascript">

    function sumValues() {

        var num1;
        var num3;
        var num4;

        num1 = Number(document.formcalc.txtnum1.value);
        num3 = ((num1 * 0.12) - (num1 * 0.118)) / 12;
        num4 = ((num1 * 0.12) - (num1 * 0.118)) * 15500;

        document.formcalc.txtres.value = 'Fr. ' + Math.round(num3) + '.-';
        document.formcalc.txtres2.value = 'Fr. ' + Math.round(num4) + '.-';
        // document.getElementById("result").value = res;
    }

</script>

Answer 1

目前还不清楚您要问什么。但是在带有JavaScript的HTML中，您的评论是：

document.getElementById("result").value = "90000";

如果您打算在输入中设置一个值，则

实际上是正确的。

另外，我想知道，如果通过“预定义”你的意思是实际文本或只是一个占位符？

Answer 2

这是我的代码：

<div class="container content-center" id="margin">
    <form name="formcalc">
        <div class="form-group row">
            <label for="staticEmail" class="col-sm-2 col-form-label">Einkommen</label>
            <div class="col-sm-10">
                <!-- <div class="input-group-addon">Fr.</div> -->
                <input type="text" class="form-control" name="txtnum1">
            </div>
        </div>
        <fieldset disabled>
            <div class="form-group row">
                <label for="staticEmail" class="col-sm-2 col-form-label">Dein Ersparniss / Jahr</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="txtres" readonly>
                </div>
            </div>
            <div class="form-group row">
                <label for="staticEmail" class="col-sm-2 col-form-label">Verlust Stadt Wil / Jahr</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="txtres2" readonly>
                </div>
            </div>
        </fieldset>
        <input type="button" class="btn btn-danger" value="Berechnen" onClick="sumValues()">
    </form>
    <hr class="featurette-divider">

    <section class="container">
        <p class="lead" id="lead"> Ist es dir Wert, dass deine Stadt pro Jahr XXX weniger Budget zur Verfügung hat
            und du XXX mehr pro Jahr in der Tasche hast?
        </p>

    </section>

    <hr class="featurette-divider">
    <small class="d-block mb-3 text-muted">created by Behar Zenuni</small>

</div>

我想为输入字段已经有“大一”在用户输入数字之前进入内部。

Answer 3

如果我了解您想要的内容，则想添加“ Fr”。前缀和“.-”后缀自动到你的价值，对不对？这样做的一种方式是使用onBlur event，因此

当用户点击/可前往[出了场，代码将添加其余

例如，您的HTML是：

<input name="einkommen" type="text" value="" onblur="formatValue(this)">

和这个功能添加到您的Javascript：

ES5：

function formatValue(e) {
    e.value = 'Fr. ' + e.value + '.-';
};

ES6：

const formatValue = e => e.value = `Fr. ${e.value}.-`;

Answer 4

我想这就是你想要的：

$(document).ready(function(){
  sumValues = function() {
    var num1;
    var num3;
    var num4;
    num1 = 90000;
    num3 = ((num1 * 0.12) - (num1 * 0.118)) / 12;
    num4 = ((num1 * 0.12) - (num1 * 0.118)) * 15500;
    $('input[name="txtnum1"]').val(num1);
    $('input[name="txtres1"]').val('Fr. ' + Math.round(num3) + '.-');
    $('input[name="txtres2"]').val('Fr. ' + Math.round(num4) + '.-');
    $('input[name="txtnum1"]').addClass( "colored-background" );
  };
})

.colored-background {
  background: yellow !important;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<div class="container">
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Einkommen</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" name="txtnum1" value="Fr.  .-" readonly>
    </div>
  </div>
  
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Dein Ersparniss / Jahr</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" name="txtres1" value="Fr.  .-" readonly>
    </div>
  </div>
  
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Dein Ersparniss / Jahr</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" name="txtres2" value="Fr.  .-" readonly>
    </div>
  </div>
  
  <input type="button" class="btn btn-danger" value="Berechnen" onClick="sumValues()">
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

将html放入输入栏

4 个答案: