HTML输入框怎么输入后变成文本
3个回答
2016-06-24 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
HTML输入框输入后变成文本是通过输入后失去焦点，更改为label嵌套input来实现的。
实现思路：当输入文本后，隐藏input对象，然后把文本内容追加到label标签内。
实现代码：
1、html代码：
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.8.3.min.js"/>
</head>
<body>
<label>
<input type="text" name="输入后消失" id="input1"/>
</label>
</body>
</html>
2、js代码：
$(document).ready(function(){
$("#input1").blur(function(){
$(this).hide();
$(this).parent().html($(this).val());
});
});
3、显示效果如下：
输入文字：
显示结果：
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用Js操作，思路是这样的：
1、输入框显示，同时有个隐藏的label标签；
2、当按回车时，隐藏输入框，把输入内容设置到label标签，并在此位置显示label标签；
3、输入框中的内容通过ajax提交到后台。
这样看上去就好像是直接变成了文字一样，其实是障眼法。
这是我以前做过类似的效果，其中部分代码的片段
：
<input type="button" id="btn_add_ztyj" value="添加" onclick="addZtyj()"/>
<label id="tempLabel"></label>
js代码：
function addZtyj(){
var content = $('#ztyj').val()
var id = $('#id').val()
if(content==''){
alert("请输入中途意见！");
return;
}
$.ajax({
type: 'post',
url: 'gd!ztyj.action',
data: {ztyj:content,id:id},
dataType: 'text',
success : function(data){
var tips;
if(data=='ok'){
tips = content;
}else {
tips = '添加出错！'
}
$('#btn_add_ztyj').hide(); //隐藏添加按钮
$('#ztyj').hide(); //隐藏输入框
$('#tempLabel').html(tips); //将输入内容赋值给label
}
});
}
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
不太明白什么意思，输入的内容本身就可以当做文本来看待啊
更多追问追答
追问
就是输入完成后回车就变成一行文字啊
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
