禁用自动展开textarea和移动版网页

时间：2017-09-27 12:27:28

标签： jquery html css twitter-bootstrap

使用HTML和CSS Bootstrap创建消息聊天模板，一切看起来都不错但是当我在移动设备中打开聊天并点击文本区域键入消息时，界面会扩展，在这种情况下用户必须滚动才能再次看到发送按钮聊天框也不适合我想要的屏幕。我将宽度设置为100％最大宽度100％。如何使文本区域不扩展页面并禁止用户使用CSS或jQuery在移动设备中展开页面？

代码段：

＆＃13;
＆＃13; 
$(document).ready(function() {
  max = $(document).height() - $('#qnimater').offset().top;
  $('#qnimate').css('max-height',max);
});

$(document).ready(function() {
  var height = $(document).height();
  height = height - (100);
  $("#qnimater").css({ 'max-height' : height.toString() });
});
＆＃13; 
	@import url(https://fonts.googleapis.com/css?family=Oswald:400,300);
	@import url(https://fonts.googleapis.com/css?family=Open+Sans);
	body {
		font-family: 'Open Sans', sans-serif;
		overflow:hidden;
	}
	.popup-box {
		background-color: #ffffff;
		border: 1px solid #b0b0b0;
		bottom: 0;
		height: 100%;
		position: fixed;
		right: 0px;
		left: 0;
		max-width: 100%;
		font-family: 'Open Sans', sans-serif;
	}
	.round.hollow {
		margin: 40px 0 0;
	}
	.round.hollow a {
		border: 2px solid #ff6701;
		border-radius: 35px;
		color: red;
		color: #ff6701;
		font-size: 23px;
		padding: 10px 21px;
		text-decoration: none;
		font-family: 'Open Sans', sans-serif;
	}
	.round.hollow a:hover {
		border: 2px solid #000;
		border-radius: 35px;
		color: red;
		color: #000;
		font-size: 23px;
		padding: 10px 21px;
		text-decoration: none;
	}
	.popup-box-on {
		display: block !important;
	}
	.popup-box .popup-head {
		background-color: #fff;
		clear: both;
		color: #7b7b7b;
		display: inline-table;
		font-size: 21px;
		padding: 7px 10px;
		width: 100%;
		font-family: Oswald;
	}
	.bg_none i {
		border: 1px solid #ff6701;
		border-radius: 25px;
		color: #ff6701;
		font-size: 17px;
		height: 33px;
		line-height: 30px;
		width: 33px;
	}
	.bg_none:hover i {
		border: 1px solid #000;
		border-radius: 25px;
		color: #000;
		font-size: 17px;
		height: 33px;
		line-height: 30px;
		width: 33px;
	}
	.bg_none {
		background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
		border: medium none;
	}
	.popup-box .popup-head .popup-head-right {
		margin: 11px 7px 0;
	}
	.popup-box .popup-messages {} 
	.popup-head-left img {
		border: 1px solid #7b7b7b;
		border-radius: 50%;
		width: 44px;
	}
	.popup-messages-footer > textarea {
		border-bottom: 1px solid #b2b2b2 !important;
		height: 34px !important;
		margin: 7px;
		padding: 5px !important;
		border: medium none;
		width: 85% !important;
	}
	.popup-messages-footer {
		background: #fff none repeat scroll 0 0;
		bottom: 0;
		position: absolute;
		width: 100%;
	}
	.popup-messages-footer .btn-footer {
		overflow: hidden;
		padding: 2px 5px 10px 6px;
		width: 100%;
	}
	.simple_round {
		background: #d1d1d1 none repeat scroll 0 0;
		border-radius: 50%;
		color: #4b4b4b !important;
		height: 21px;
		padding: 0 0 0 1px;
		width: 21px;
	}
	.popup-box .popup-messages {
		background: #3f9684 none repeat scroll 0 0;
		height: 80%;
		overflow: auto;
	}
	.direct-chat-messages {
		overflow: auto;
		padding: 10px;
		transform: translate(0px, 0px);
	}
	.popup-messages .chat-box-single-line {
		border-bottom: 1px solid #a4c6b5;
		height: 12px;
		margin: 7px 0 20px;
		position: relative;
		text-align: center;
	}
	.popup-messages abbr.timestamp {
		background: #3f9684 none repeat scroll 0 0;
		color: #fff;
		padding: 0 11px;
	}
	.popup-head-right .btn-group {
		display: inline-flex;
		margin: 0 8px 0 0;
		vertical-align: top !important;
	}
	.chat-header-button {
		background: transparent none repeat scroll 0 0;
		border: 1px solid #636364;
		border-radius: 50%;
		font-size: 14px;
		height: 30px;
		width: 30px;
		text-align: center;
	}
	.popup-head-right .btn-group .dropdown-menu {
		border: medium none;
		min-width: 122px;
		padding: 0;
	}
	.popup-head-right .btn-group .dropdown-menu li a {
		font-size: 12px;
		padding: 3px 10px;
		color: #303030;
	}
	.popup-messages abbr.timestamp {
		background: #3f9684 none repeat scroll 0 0;
		color: #fff;
		padding: 0 11px;
	}
	.popup-messages .chat-box-single-line {
		border-bottom: 1px solid #a4c6b5;
		height: 12px;
		margin: 7px 0 20px;
		position: relative;
		text-align: center;
	}
	.popup-messages .direct-chat-messages {
		height: auto;
	}
	.popup-messages .direct-chat-text {
		background: #dfece7 none repeat scroll 0 0;
		border: 1px solid #dfece7;
		border-radius: 2px;
		color: #1f2121;
	}
	.popup-messages .direct-chat-timestamp {
		color: #fff;
		opacity: 0.6;
	}
	.popup-messages .direct-chat-name {
		font-size: 15px;
		font-weight: 600;
		margin: 0 0 0 49px !important;
		color: #fff;
		opacity: 0.9;
	}
	.popup-messages .direct-chat-info {
		display: block;
		font-size: 12px;
		margin-bottom: 0;
	}
	.popup-messages .big-round {
		margin: -9px 0 0 !important;
	}
	.popup-head-left{
	    margin-top: 5px;
vertical-align: middle;
	}
	.popup-messages .direct-chat-img {
		border: 1px solid #fff;
		background: #3f9684 none repeat scroll 0 0;
		border-radius: 50%;
		float: left;
		height: 40px;
		/*margin: -21px 0 0;*/
		width: 40px;
	}
	.direct-chat-reply-name {
		color: #fff;
		font-size: 15px;
		margin: 0 0 0 10px;
		opacity: 0.9;
	}
	
	.direct-chat-img-reply-small {
		border: 1px solid #fff;
		border-radius: 50%;
		float: left;
		height: 20px;
		margin: 0 8px;
		width: 20px;
		background: #3f9684;
	}
	.popup-messages .direct-chat-msg {
		margin-bottom: 10px;
		position: relative;
	}


	.direct-chat-text::after,
	.direct-chat-text::before {
		border-color: transparent #dfece7 transparent transparent;
	}
	.direct-chat-text::after,
	.direct-chat-text::before {
		-moz-border-bottom-colors: none;
		-moz-border-left-colors: none;
		-moz-border-right-colors: none;
		-moz-border-top-colors: none;
		border-color: transparent #d2d6de transparent transparent;
		border-image: none;
		border-style: solid;
		border-width: medium;
		content: " ";
		height: 0;
		pointer-events: none;
		position: absolute;
		right: 100%;
		top: 15px;
		width: 0;
	}
	.direct-chat-text::after {
		border-width: 5px;
		margin-top: -5px;
	}
	.popup-messages .direct-chat-text {
		background: #dfece7 none repeat scroll 0 0;
		border: 1px solid #dfece7;
		border-radius: 2px;
		color: #1f2121;
	}
	.direct-chat-text {
		background: #d2d6de none repeat scroll 0 0;
		border: 1px solid #d2d6de;
		border-radius: 5px;
		color: #444;
		margin: 5px 0 0 50px;
		padding: 5px 10px;
		position: relative;
	}
	.popup-messages-footer .uk-input-group-addon{
        height: 34px !important;
        padding: 0px;
        border: medium none;
        display: inline-block;
        position: absolute;
        top: 5px;
	}
.uk-input-group-addon .glyphicon.glyphicon-send {
    color: #3F9684;
    font-size: 30px;
    line-height: 36px;
    padding: 0 6px;
    font-weight: bold;
}
＆＃13; 
<div class="popup-box chat-popup" id="qnimate">
		<div class="popup-head">
			<div class="popup-head-left pull-left"><a href="#">Univercial Hotel Hall</a></div>
			<div class="popup-head-right pull-right text-center">
			    <div class="btn-group">
			    <button class="chat-header-button"><i class="glyphicon glyphicon-info-sign"></i> </button>
			    </div>
				<div class="btn-group">
					<button class="chat-header-button" data-toggle="dropdown" type="button" aria-expanded="false"> <i class="glyphicon glyphicon-cog"></i></button>
					<ul role="menu" class="dropdown-menu pull-right">
						<li><a href="#">Media</a>
						</li>
						<li><a href="#">Block</a>
						</li>
						<li><a href="#">Clear Chat</a>
						</li>
						<li><a href="#">Email Chat</a>
						</li>
					</ul>
				</div>
                
				<button data-widget="remove" id="removeClass" class="chat-header-button pull-right" type="button"><i class="glyphicon glyphicon-off"></i></button>
			</div>
		</div>
		<div class="popup-messages">




			<div class="direct-chat-messages">
                 
                 
                 				<div class="chat-box-single-line"> <abbr class="timestamp">October 8th, 2015</abbr></div>
				<!-- Message. Default to the left -->
				<div class="direct-chat-msg doted-border me">
					<!-- /.direct-chat-info -->
					<img alt="message user image" src="https://d2xngy2dw7hums.cloudfront.net/media/photos/profiles/2017/09/26/ujahchigozie_1506417938.jpg" class="direct-chat-img">
					<!-- /.direct-chat-img -->
					<div class="direct-chat-text">Hey bro, how’s everything going ?	</div>
					<div class="direct-chat-info clearfix"><span class="direct-chat-timestamp pull-right">3.36 PM</span></div>
					<!-- /.direct-chat-text -->
				</div>
				<!-- /.direct-chat-msg -->
				
								<div class="chat-box-single-line"> <abbr class="timestamp">October 8th, 2015</abbr></div>
				<!-- Message. Default to the left -->
				<div class="direct-chat-msg doted-border me">
					<!-- /.direct-chat-info -->
					<img alt="message user image" src="https://d2xngy2dw7hums.cloudfront.net/media/photos/profiles/2017/09/26/ujahchigozie_1506417938.jpg" class="direct-chat-img">
					<!-- /.direct-chat-img -->
					<div class="direct-chat-text">Hey bro, how’s everything going ?	</div>
					<div class="direct-chat-info clearfix"><span class="direct-chat-timestamp pull-right">3.36 PM</span></div>
					<!-- /.direct-chat-text -->
				</div>
				<!-- /.direct-chat-msg -->
				
				
								<div class="chat-box-single-line"> <abbr class="timestamp">October 8th, 2015</abbr></div>
				<!-- Message. Default to the left -->
				<div class="direct-chat-msg doted-border me">
					<!-- /.direct-chat-info -->
					<img alt="message user image" src="https://d2xngy2dw7hums.cloudfront.net/media/photos/profiles/2017/09/26/ujahchigozie_1506417938.jpg" class="direct-chat-img">
					<!-- /.direct-chat-img -->
					<div class="direct-chat-text">Hey bro, how’s everything going ?	</div>
					<div class="direct-chat-info clearfix"><span class="direct-chat-timestamp pull-right">3.36 PM</span></div>
					<!-- /.direct-chat-text -->
				</div>
				<!-- /.direct-chat-msg -->
				
		
				<!-- Message. Default to the left -->
				<div class="direct-chat-msg doted-border me">
					<!-- /.direct-chat-info -->
					<img alt="message user image" src="https://d2xngy2dw7hums.cloudfront.net/media/photos/profiles/2017/09/26/ujahchigozie_1506417938.jpg" class="direct-chat-img">
					<!-- /.direct-chat-img -->
					<div class="direct-chat-text">Hey bro, how’s everything going Hey bro, how’s everything going Hey bro, how’s everything going Hey bro, how’s everything going ?	</div>
					<div class="direct-chat-info clearfix"><span class="direct-chat-timestamp pull-right">3.36 PM</span></div>
					<!-- /.direct-chat-text -->
				</div>
				<!-- /.direct-chat-msg -->
				

				<!-- Message. Default to the left -->
				<div class="direct-chat-msg doted-border me">
					<!-- /.direct-chat-info -->
					<img alt="message user image" src="https://d2xngy2dw7hums.cloudfront.net/media/photos/profiles/2017/09/26/ujahchigozie_1506417938.jpg" class="direct-chat-img">
					<!-- /.direct-chat-img -->
					<div class="direct-chat-text">Hey bro, how’s everything going ?	</div>
					<div class="direct-chat-info clearfix"><span class="direct-chat-timestamp pull-right">3.36 PM</span></div>
					<!-- /.direct-chat-text -->
				</div>
				<!-- /.direct-chat-msg -->

            <br/><br/>
			</div>





		</div>
		<div class="popup-messages-footer">
			<textarea id="status_message" placeholder="Type a message..."
			rows="10" cols="40" name="message"></textarea>
			<span class="uk-input-group-addon"><a href="#"><i class="glyphicon glyphicon-send"></i></a></span>
			<div class="btn-footer col-xs-12">
				<button class="bg_none"><i class="glyphicon glyphicon-earphone"></i></button>
				<button class="bg_none"><i class="glyphicon glyphicon-camera"></i></button>
				<button class="bg_none"><i class="glyphicon glyphicon-paperclip"></i></button>
				<button class="bg_none pull-right"><i class="glyphicon glyphicon-thumbs-up"></i></button>
			</div>
		</div>
	</div>
		<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
＆＃13;
＆＃13;
＆＃13;

这就是我想要的

enter image description here

输入

时显示的内容

[enter image description here 2

输入后就像这样

enter image description here

0 个答案:

没有答案
相关问题
最新问题