Make body behave like a button when I click anywhere and save-CodePudding

I have a text area, button to save the text that is type inside the text area and some other stuff on the page.

I want to click outside of the body and save the text that I type inside the text area; my body should act as button.

My problem is it does save the information but it affects everything that I have on my page e.g. wherever I click, it saves and I want it not to save when I click some other button - it should focus only outside the element.

What should I do to focus only outside the element because I even try function called stopPropagation.

var text_a = document.getElementById("myTextarea");
var btn_saveComment = document.getElementById("submit2");

function saveComments() {
  text_a.style.display = "block";
  $("#comment").text($(text_a).val());
  var g = document.getElementById("checks5");
  g.checked = true;
  g.disabled = false;
  $("#checks5").css({
    backgroundColor: "#C40929"
  })
}

document.addEventListener("click", function(e) {
  e.stopPropagation();
  text_a.style.display = "block";
  $("#comment").text($(text_a).val());
  var g = document.getElementById("checks5");
  g.checked = true;
  g.disabled = false;
  $("#checks5").css({
    backgroundColor: "#C40929"
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div >
  <input type="checkbox"  id="checks5">
  <label for="checks5"></label>
</div>

<p id="comment" ></p>
<textarea id="myTextarea" rows="5" cols="30" ></textarea>
<button  id="submit2" onclick="saveComments()">Save Comment</button>

CodePudding user response：

You can simply add onBlur attribute to the text area. Like this:

<textarea id="myTextarea" rows="5" cols="30" onblur="saveComments()" ></textarea>

See demo below:

var text_a = document.getElementById("myTextarea");
var btn_saveComment = document.getElementById("submit2");

function saveComments() {
  console.log('saving...');
  text_a.style.display = "block";
  $("#comment").text($(text_a).val());
  var g = document.getElementById("checks5");
  g.checked = true;
  g.disabled = false;
  $("#checks5").css({
    backgroundColor: "#C40929"
  });
  console.log('saved');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div >
  <input type="checkbox"  id="checks5">
  <label for="checks5"></label>
</div>

<p id="comment" ></p>
<textarea id="myTextarea" rows="5" cols="30" onblur="saveComments()" ></textarea>
<button  id="submit2" onclick="saveComments()">Save Comment</button>

CodePudding user response：

Using simple vanilla Javascript you can use the event to aid the process of using the document Body to work as the button in the original code by inspecting the event.target and event.currentTarget properties. When the event listener is bound to the body ( as below ) the currentTarget is the body element itself rather than any child element so that allows you to process the click on that itself quite easily.

( css to make this easier to observe within the snippet )

const d=document;

d.body.addEventListener('click',e=>{

  let oText=d.querySelector('textarea#myTextarea');
  
  if( e.target==e.currentTarget && oText.value!='' ){
    let oPara=d.querySelector('p#comment');
        oPara.textContent=oText.value;
        
    let oChk=d.querySelector('input#checks5'); 
        oChk.checked=true;
        oChk.disabled=false;
        oChk.style.backgroundColor="#C40929"
  }
})

body{
  height:100vh;
  width:100%;
  padding:0;
  margin:0;
}

<div >
  <input type="checkbox"  id="checks5">
  <label for="checks5"></label>
</div>

<p id="comment" ></p>
<textarea id="myTextarea" rows="5" cols="30" ></textarea>