Javascript Click event on input field

Question

Javascript Click event on input field

Binding the event of clicking on the list of elements, the window continues to disappear. Any idea why the click event is not working on the item-list> div.

The idea is to extract the text (from the list of items) that was clicked and put it in the input field?

(function() {
  $(".input-msg").focus(function() {
    $(".item-list").css('display', 'block');
    $(".item-list div").click(function() {
      var inputValue = $('.input-msg');
      var data = $(this).text();
      inputValue.val(data);
    });
  }).blur(function() {
    $(".item-list").css('display', 'none');
  });
})();

.input-wrapper {
  width: 300px;
}

.item-list {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-wrapper">
  <input type="text" class="input-msg" placeholder="click me">
  <!-- input msg -->
  <div class="item-list">
    <div>This is item one</div>
    <div>This is item one</div>
    <div>This is item one</div>
    <div>This is item one</div>
  </div>
</div>

Run code Hide result

+3

javascript jquery arrays html

webmansa 22 jul. 17 at 5:03

source to share

4 answers

I think I have your problem: -

1.remove blur

code. (because it hides the div immediately when focus goes out of the input box)

2.Put click

out focus

. (register listener is one-time only, which is sufficient)

3. click

Enter the code inside hide

. (if you want to hide the div after clicking on the text div)

Working snippet: -

(function() {
  $(".input-msg").focus(function() {
    $(".item-list").css('display', 'block');
    
  });
  $(".item-list div").click(function() {
      var inputValue = $('.input-msg');
      var data = $(this).text();
      inputValue.val(data);
      $('.item-list').hide();
  });
})();
$(document).mouseup(function(e) {
  if (!$(e.target).is('.item-list') && !$(e.target).is('.input-msg')) {
    $('.item-list').hide(1000);
  }
});

.input-wrapper {
  width: 300px;
}

.item-list {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-wrapper">
  <input type="text" class="input-msg" placeholder="click me">
  <!-- input msg -->
  <div class="item-list">
    <div>This is item one</div>
    <div>This is item Two</div>
    <div>This is item Three</div>
    <div>This is item Four</div>
  </div>
</div><br>

Run code Hide result

+3

Alive to Die 22 jul. 17 at 5:07

source to share

The list of items disappears because the blur

list is cleared on an event triggered by the input field. I commented out the code that hides the list and moved it to happen in the list of items click

.

I've also moved the list handler click

out of your handler blur

. This will prevent the possibility of re-mounting the click handler.

(function() {
  $(".input-msg").focus(function() {
    $(".item-list").css('display', 'block');

  }).blur(function() {
 
    // THIS IS YOUR ISSUE.
    // We're going to move this line down to the 
    // `item-list` click handler.
    // $(".item-list").css('display', 'none');

  });

  // You want to register this listener once,
  // not every time user focuses on input box.
  $(".item-list div").click(function() {
    var inputValue = $('.input-msg');
    var data = $(this).text();
    inputValue.val(data);
  });

  $('.main-wrapper').children().not('.input-wrapper').click(function(){
    // Hide the item list on body click.
    // This was moved here from the `blur` handler above.
    $(".item-list").css('display', 'none');
  });

})();

.main-wrapper {
  float: left;
  width: 600px;
}
  
.other-wrapper {
 float: left;
 width: 300px;
}

.input-wrapper {
  float: left;
  width: 300px;
}

.item-list {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-wrapper">
<div class="input-wrapper">
  <input type="text" class="input-msg" placeholder="click me">
  <!-- input msg -->
  <div class="item-list">
    <div>This is item one</div>
    <div>This is item one</div>
    <div>This is item one</div>
    <div>This is item one</div>
  </div>
</div>
<div class="other-wrapper">Other stuff.</div>
<div>

Run code Hide result

+1

Ezra chu 22 jul. 17 at 5:08

source to share

const input = $("input")
const itemList = $(".item-list")
const items = $(".item-list > div")
const overlay = $(".overlay")

addClickTo(input, () => display(itemList, overlay))
addClickTo(items, (e) => {
  const itemText = e.currentTarget.textContent
  setValueOf(input, itemText)
  dontDisplay(itemList, overlay)
})
addClickTo(overlay, () => dontDisplay(itemList, overlay))


// helpers
function dontDisplay(...elements) { elements.forEach((element) => element.style.display = "none") }
function display(...elements) { elements.forEach((element) => element.style.display = "block") }
function $(selector) {
  const matchedElements = document.querySelectorAll(selector)
  return matchedElements && matchedElements.length > 1
  ? matchedElements
  : matchedElements[0]
}
function addClickTo(elements, handler) {
  elements.forEach || (elements = [elements])
  elements.forEach((element) => element.addEventListener("click", handler))
}
function setValueOf(input, text) {
    input.value = text
}

const input = $("input")
const itemList = $(".item-list")
const items = $(".item-list > div")
const overlay = $(".overlay")

addClickTo(input, () => display(itemList, overlay))
addClickTo(items, (e) => {
  const itemText = e.currentTarget.textContent
  setValueOf(input, itemText)
  dontDisplay(itemList, overlay)
})
addClickTo(overlay, () => dontDisplay(itemList, overlay))


// helpers
function dontDisplay(...elements) { elements.forEach((element) => element.style.display = "none") }
function display(...elements) { elements.forEach((element) => element.style.display = "block") }
function $(selector) {
  const matchedElements = document.querySelectorAll(selector)
  return matchedElements && matchedElements.length > 1
  ? matchedElements
  : matchedElements[0]
}
function addClickTo(elements, handler) {
  elements.forEach || (elements = [elements])
  elements.forEach((element) => element.addEventListener("click", handler))
}
function setValueOf(input, text) {
	input.value = text
}

.item-list {
  display: none;
  position: relative;
  cursor: pointer;
}

input {
  position: relative;
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="input-wrapper">
  <div class="overlay"></div>
  <input type="text" class="input-msg" placeholder="click me">

  <!-- input msg -->
  <div class="item-list">
    <div>This is item one</div>
    <div>This is item two</div>
    <div>This is item three</div>
    <div>This is item four</div>
  </div>
</div>

Run code Hide result

https://jsfiddle.net/dvekrebv/6/

0

marzelin 22 jul. 17 at 6:50 am

source to share

Ikbel · Accepted Answer · 2017-07-22T05:25:01+0000

Take a look at this.

(function() {
  $(".item-list div").click(function() {
    var inputValue = $('.input-msg');
    var data = $(this).text();
    inputValue.val(data);
    $('.item-list').fadeOut('fast');
  });
  $(".input-msg").focus(function() {
    $(".item-list").fadeIn('fast');        
  })
  $(document).mouseup(function(e) {
    if (!$(e.target).is('.item-list') && !$(e.target).is('.input-msg')) {
      $('.item-list').fadeOut('fast');
    }
  });
})();

.input-wrapper {
  width: 300px;
}

.item-list {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-wrapper">
  <input type="text" class="input-msg" placeholder="click me">
  <!-- input msg -->
  <div class="item-list">
    <div>This is item one</div>
    <div>This is item two</div>
    <div>This is item three</div>
    <div>This is item four</div>
  </div>
</div>

Run code Hide result

Javascript Click event on input field

More articles: