gpt4 book ai didi

Jquery:隐藏文本框然后显示它

转载 作者:行者123 更新时间:2023-12-01 03:17:12 26 4
gpt4 key购买 nike

我对 jquery 很陌生。我这里有一个很大的疑问。基本上我想在 jquery 中做递归之类的事情!我在 div 中有一个文本框。用户将在文本框中输入他的名字,然后当他单击文本框之外时,我想隐藏文本框并打印用户在部门的文本框中写入的任何内容(我能够完美地做到这一点,但是问题摆在面前)。假设如果用户在输入时犯了一些错误,现在我想要的是当用户单击该 div 时返回相同的文本框。然后,当他再次单击该文本框时,文本框应隐藏,输入的文本应打印在 div 中。

我的 HTML 代码:

 <html>
<body>
<div style="width:18px; font-weight:bold; text-align:center;" id="filltheblank1" > <input type="text" /></div>
</body>
</html>

Jquery:

$(document).ready(function () {
$("#filltheblank1").children(this).blur(function () {
if ($(this).val()) {
var entered = $(this).val().toUpperCase();
}
$(this).hide(500, function () {
$(this).parent(this).html(entered).click(function () {
//now what to do here. I want that when user clicks o the div, the textbox should come back and when he clicks out again, it should go away and the text he entered should be preinted

});
});
});
});

请帮助某人

最佳答案

首先,我会添加另一个 div 来显示文本,并使用 display:none 第一次隐藏它:

<html>
<body>
<div style="width:18px; font-weight:bold; text-align:center;" id="filltheblank1" >
<input type="text" />
</div>
<div id="message" style="display:none"></div>
</body>
</html>

然后在 JS 代码中,您必须改进 CSS 选择器以访问输入元素 htm,假设只有一个输入,这就是我的做法:

$(document).ready(function(){

$("#filltheblank1 input").on('blur', function(){ //on is how it should be done on jQuery 1.7 and up
if($(this).val()){
var entered = $(this).val().toUpperCase();
}
$("#filltheblank1").fadeOut(500, function(){
$("#message").html(entered);
$("#message").show(); //shows hidden div
}
});

//event to show the input when user clicks the div
$("#message").on('click', function(){
$(this).hide();
$("#filltheblank1").fadeIn();
});
});

我确实将事件分开来执行您想要的操作,并向元素添加了 id 以使 JavaScript 代码更容易、更快。

关于Jquery:隐藏文本框然后显示它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14305095/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com