Как показать код JavaScript, когда поле ввода заполнено - PullRequest
Новая
       48

Как показать код JavaScript, когда поле ввода заполнено

0 голосов
/ 09 марта 2020

У меня есть приложение 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/

Ответы [ 2 ]

0 голосов
/ 09 марта 2020

Я не совсем уверен, будет ли это выполнено так, как ожидалось, но вы задали следующую функцию:

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 = ''
  }
}
0 голосов
/ 09 марта 2020

Я обновил ваш код, как показано ниже: 

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/

...