填充输入框时如何显示 JavaScript 代码答案

【问题标题】：How to show a JavaScript code when input box is filled填充输入框时如何显示 JavaScript 代码
【发布时间】：2020-06-21 15:22:58
【问题描述】：

我有一个 Laravel 应用程序，我想显示

<div class="clearfix"></div>
                    <div class="row mb-5">
                      <div class="col-lg-12 ">
                          <label for="">{{__('How to proceed with')}} {{$current_method->name}} {{__('deposits')}} </label>
                          <div  class="alert alert-secondary bg-teal" role="alert">
                              {!! $current_method->how_to !!}
                          </div>
                      </div>
                    </div>

当用户填写该框时。我该怎么做？我已经给出了示例小提琴链接 http://jsfiddle.net/18svz2hc/

【问题讨论】：

标签： javascript php html voyager

【解决方案1】：

我已更新您的代码，如下所示：

function check() {
      if (document.getElementById('text').value.length) {
          document.getElementById('message').innerHTML = '<div class="clearfix"></div>'+
                    '<div class="row mb-5">'+
                      '<div class="col-lg-12 ">'+
                          '<label for="">{{__('How to proceed with')}} {{$current_method->name}} {{__('deposits')}} </label>'+
                          '<div  class="alert alert-secondary bg-teal" role="alert">'+ {!! $current_method->how_to !!}</div>'+
                      '</div>'+
                    '</div>';
      } else {
          document.getElementById('message').innerHTML = '';
      }
  }

在https://jsfiddle.net/dhoot/cjquesvk/6/

您的要求也可以在https://jsfiddle.net/dhoot/cjquesvk/4/进行测试

【讨论】：

【解决方案2】：

我不确定这是否会按预期呈现，但您询问的功能如下。

HTML

只需将参数event 传递给您的方法check，这样您就可以轻松访问它的值。

<label>text :
    <input name="text" id="text" type="text" onkeyup="check(event)" />
</label>
<br>
<span id="message"></span>

Javascript

使用反引号 (`)，因此您无需担心换行符。

var check = function (e) {
  var message = document.getElementById('message')

  if (e.target.value) {
    message.innerHTML = `<div class="clearfix"></div>
      <div class="row mb-5">
        <div class="col-lg-12 ">
          <label for="">{{__('How to proceed with')}} {{$current_method->name}} {{__('deposits')}}</label>
          <div class="alert alert-secondary bg-teal" role="alert">{!! $current_method->how_to !!}</div>
        </div>
      </div>`
  } else {
    message.innerHTML = ''
  }
}

【讨论】：