jquery点击文字弹出留言输入框

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery点击文字弹出留言输入框相关的知识,希望对你有一定的参考价值。

我要做一个点击“我要留言”文字就出来个输入框,,就和微信朋友圈留言的效果一样,,求大神帮帮忙

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>jQuery实现点击文本框弹出热门标签的提示示例_网页代码站</title> 
<style type="text/css"> 
body  
font-size:12px;font-family:Arial; 
 
#m_tagsItem  
background:#fff; 
position:absolute; 
top:0px; 
left:0px; 
overflow:hidden; 
width:590px; 
*width:561px; 
width:561px\\9; 
padding:10px; 
border:1px solid #ccc; 
z-index:1000; 
display:none; 
 
#m_tagsItem p  
text-align:left; 
line-height:22px; 
padding:2px 0; 
margin:0; 
border:0; 
 
#m_tagsItem span  
font-weight:bold; 
 
#m_tagsItem a  
margin:0 5px; 
 
.m_tagsname  
color:#999; 
vertical-align:middle; 
font-size:12px; 
text-indent:3px; 
line-height:20px; 
 
#tagClose  
font-size:12px; 
color:#888; 
cursor:pointer; 
position:absolute; 
top:2px; 
right:2px; 
 
</style> 
<script src="http://www.webdm.cn/themes/script/jquery.js"></script> 
<script language="javascript"> 
(function ($)  
$.fn.bgIframe = $.fn.bgiframe = function (s)  
if ($.browser.msie && /6.0/.test(navigator.userAgent))  
s = $.extend( 
top: 'auto', // auto == .currentStyle.borderTopWidth 
left: 'auto', // auto == .currentStyle.borderLeftWidth 
width: 'auto', // auto == offsetWidth 
height: 'auto', // auto == offsetHeight 
opacity: true, 
src: 'javascript:false;' 
, s || ); 
var prop = function (n)  return n && n.constructor == Number ? n + 'px' : n; , 
html = '<iframe class="bgiframe"frameborder="0"tabindex="-1"src="' + s.src + '"' + 
'style="display:block;position:absolute;z-index:-1;' + 
(s.opacity !== false ? 'filter:Alpha(Opacity=\\'0\\');' : '') + 
'top:' + (s.top == 'auto' ? 'expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)||0)*-1)+\\'px\\')' : prop(s.top)) + ';' + 
'left:' + (s.left == 'auto' ? 'expression(((parseInt(this.parentNode.currentStyle.borderLeftWidth)||0)*-1)+\\'px\\')' : prop(s.left)) + ';' + 
'width:' + (s.width == 'auto' ? 'expression(this.parentNode.offsetWidth+\\'px\\')' : prop(s.width)) + ';' + 
'height:' + (s.height == 'auto' ? 'expression(this.parentNode.offsetHeight+\\'px\\')' : prop(s.height)) + ';' + 
'"/>'; 
return this.each(function ()  
if ($('> iframe.bgiframe', this).length == 0) 
this.insertBefore(document.createElement(html), this.firstChild); 
); 
 
return this; 

)(jQuery); 
jQuery.fn.selectCity = function (targetId)  
var _seft = this; 
var targetId = $(targetId); 
this.click(function ()  
var A_top = $(this).offset().top + $(this).outerHeight(true); // 1 
var A_left = $(this).offset().left; 
targetId.bgiframe(); 
targetId.show().css( "position": "absolute", "top": A_top + "px", "left": A_left + "px" ); 
); 
targetId.find("#tagClose").click(function ()  
targetId.hide(); 
); 
$(document).click(function (event)  
if (event.target.id != _seft.selector.substring(1))  
targetId.hide(); 
 
); 
targetId.click(function (e)  
e.stopPropagation(); // 2 
); 
return this; 
 
$(function ()  
$("#selecttags").selectCity("#m_tagsItem"); 
); 
//为文本域连续赋值 
function checktag(o)  
var tagid = function (id)  return document.getElementById(id);  
var tags = []; //存放标签,避免重复加入 
var tagidSPLITCHAR = ' '; //设定分隔符,根据程序需求可改 
var d = tagid('selecttags'); 
if (d.value) 
tags = d.value.split(tagidSPLITCHAR); 
var v = o.innerHTML; //如果tag有别的值或者别的非innerHTML里体现的内容 
var s = tagidSPLITCHAR + tags.join(tagidSPLITCHAR) + tagidSPLITCHAR 
if (!new RegExp(tagidSPLITCHAR + v + tagidSPLITCHAR, 'g').test(s))  
s += v; 
 
s = s.replace(new RegExp("(^" + tagidSPLITCHAR + "*|" + tagidSPLITCHAR + "*tagid)", "g"), ''); 
d.value = s; 
tags = s.split(tagidSPLITCHAR); 
 
</script> 
</head> 
<body> 
如果没有出现提示框请刷新一下页面再试~ 
<input type="text" id="selecttags" name="m_tagsname" class="m_tagsname" style="width: 577px" 
value="点击查看热门标签和您曾经使用过的标签" onclick="if(this.value=='点击查看热门标签和您曾经使用过的标签')this.value='';this.className='m_tagsname'"> 
<div id="m_tagsItem" style="display: none"> 
<div id="tagClose"> 
关闭</div> 
<p> 
<span>温馨提示:</span>标签间请用“空格”、“逗号”或“分号”隔开,用简练的词语概括您的博文内容。</p> 
<p> 
<span>热门标签:</span><a href="javascript:void(0)" onclick="checktag(this)">彩妆</a><a 
href="javascript:void(0)" onclick="checktag(this)">美发</a><a href="javascript:void(0)" 
onclick="checktag(this)">美优博客</a><a href="javascript:void(0)" onclick="checktag(this)">aaa</a><a 
href="javascript:void(0)" onclick="checktag(this)">bbb</a><a href="javascript:void(0)" 
onclick="checktag(this)">天堂</a><a href="javascript:void(0)" onclick="checktag(this)">eee</a><a 
href="javascript:void(0)" onclick="checktag(this)">fff</a><a href="javascript:void(0)" 
onclick="checktag(this)">ggg</a></p> 
<p> 
<span>您使用过的标签:</span><a href="javascript:void(0)" onclick="checktag(this)">软件</a><a 
href="javascript:void(0)" onclick="checktag(this)">Delphi</a><a href="javascript:void(0)" 
onclick="checktag(this)">博客</a><a href="javascript:void(0)" onclick="checktag(this)">源码</a><a 
href="javascript:void(0)" onclick="checktag(this)">彩妆</a><a href="javascript:void(0)" 
onclick="checktag(this)">google</a><a href="javascript:void(0)" onclick="checktag(this)">新浪</a></p> 
</div> 
<br /> 
<p> 
<a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!</p> 
</body> 

</html>

参考技术A

layer里边有prompt方法应该能满足你的需求

layer.prompt(title: '随便写点啥,并确认', formType: 2, function(text, index)
   layer.msg('您最后写下了:'+text);
);

参考技术B <style type="text/css">
.inpboxposition: relative;
.inpbox afont-size: 12px;color: #999;
.inpbox labelposition: absolute;top: 20px; left: 0px;overflow: hidden;display: none;
.inpbox label inputborder:#ddd solid 1px;padding:0 5px;float: left;height: 28px;line-height: 28px;
.inpbox label spandisplay: block;float: left;font-size: 12px;background: #ccc;border-radius: 3px;height: 28px;line-height: 28px;padding: 0 10px;margin-left: 10px;
</style>
<div class="inpbox">
<a href="javascript:;">我要留言</a>
<label>
<input type="text" value="" placeholder="我要留言">
<span>确认</span>
</label>
</div>
<script type="text/javascript">
$(function()
    //点击“我要留言”显示留言框
$('.inpbox a').on('click',function(event) 
$(this).siblings('label').show();
);
//点击“确认”隐藏留言框
$('.inpbox label span').on('click',function(event) 
$(this).parents('label').hide();
);
)
</script>

javascript点击按钮弹出文本框,用户可输入

当我点击注销按钮的时候弹出输入框,可输入注销原因

可以直接用js自带的prompt方法。

定义和用法

prompt() 方法用于显示可提示用户进行输入的对话框。

语法

prompt(text,defaultText)

参数

text    可选。要在对话框中显示的纯文本(而不是 HTML 格式的文本)。    

defaultText    可选。默认的输入文本。    

说明

如果用户单击提示框的取消按钮,则返回 null。如果用户单击确认按钮,则返回输入字段当前显示的文本。

在用户点击确定按钮或取消按钮把对话框关闭之前,它将阻止用户对浏览器的所有输入。在调用 prompt() 时,将暂停对 JavaScript 代码的执行,在用户作出响应之前,不会执行下一条语句。


简单的例子,仅供参考:

<body>
<input type="text" id="clock" size="35" />
<script language=javascript>
    var int=self.setInterval("clock()",50)
    function clock()
      
      var t=new Date()
      document.getElementById("clock").value=t
      
    </script>
    </form>
    <button onclick="int=window.clearInterval(int)">
    Stop interval</button>

</body>
参考技术A cliclk时间里写var html="<input />";$(html).appendTo($("#abc"));
html里存在如此div
<div id="abc"></div>
代码前头要引入jq的js哦,如果报错,就是没有引入jq,如此你代码中用过$这个符号,那就是已近引入这个js了。本回答被提问者和网友采纳

以上是关于jquery点击文字弹出留言输入框的主要内容,如果未能解决你的问题,请参考以下文章

Jquery怎样实现文本输入框鼠标定位时弹出提示

html中点击列表文字弹出提示框?

vue点击输出框文字跳转到输入框

jQuery点击文字输入搜索框 搜索

javascript点击按钮弹出文本框,用户可输入

用jQuery怎么实现点击输入框呢?