jquery 当我单击任意位置并保存时，使主体的行为类似于按钮

dgiusagp 于 2023-01-12 发布在 jQuery

关注(0)|答案(2)|浏览(98)

我有一个文本区，按钮来保存文本是在文本区和页面上的其他一些东西类型的文本。
我想单击正文外部并保存在文本区域内键入的文本;我的身体应该充当按钮。
我的问题是它确实保存了信息，但它影响了我在页面上的所有内容，例如，无论我点击哪里，它都保存了，我不希望它在我点击其他按钮时保存-它应该只关注元素之外的内容。
我应该怎么做才能只关注元素外部，因为我甚至尝试了名为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 class="wrapper">
  <input type="checkbox" class="check_ticks" id="checks5">
  <label for="checks5"></label>
</div>

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

jquery

来源：https://stackoverflow.com/questions/75092469/make-body-behave-like-a-button-when-i-click-anywhere-and-save

2条答案

按热度按时间

nbysray51#

你可以简单地把onBlur属性添加到文本区域，如下所示：

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

请参见下面的演示：

x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-01-12

aiqt4smr2#

使用简单的普通Javascript，您可以通过检查event.target和event.currentTarget属性，使用event来帮助使用文档Body作为原始代码中的按钮的过程。（如下）currentTarget是body元素本身，而不是任何子元素，因此允许您非常容易地处理单击它本身。
（css使其更易于在代码片段中观察）

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 class="wrapper">
  <input type="checkbox" class="check_ticks" id="checks5">
  <label for="checks5"></label>
</div>

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

赞(0）回复(0）举报 2023-01-12

我来回答

jquery 当我单击任意位置并保存时，使主体的行为类似于按钮

2条答案

相关问题

热门标签

最新问答