Question

您好我真的需要您的帮助。我一直在谷歌搜索如何制作像推特＆＃34;正在发生的事情的推文框＆＃34;用户使用bootstrap 3发布新内容的框，但到目前为止我找不到任何接近的内容。

任何人都有任何想法或关键字可以提供帮助吗？非常感谢你！

Answer 1

它是简单的jQuery应用程序。检查this。这是JSFiddle。

然后你要做的就是启动jQuery。如：

$('textarea').autogrow({onInitialize: true});

查看小提琴以获取更多信息。干杯！

更新的答案：

使用CSS来设置textarea的样式，这里不需要javascrcipt样式。在特定类的CSS下准备你的风格，当你需要时，你可以添加你的元素这个类及其属性。这是更清洁的解决方案。使用焦点和模糊事件来获取textarea元素。这是一个例子。

HTML

<textarea rows="4" cols="50" id="txtArea">

<textarea>

JS

$(document).ready(function() {

    $('#txtArea').on("focus", function(event) {

        if(!$('#txtArea').hasClass('customTextAreaClass')){

        $('#txtArea').addClass('customTextAreaClass');

    }
});

$('#txtArea').on("blur", function(event) {

    if($('#txtArea').hasClass('customTextAreaClass')){

        $('#txtArea').removeClass('customTextAreaClass');

    }
    });
});

CSS

.customTextAreaClass{
    background-color: #fff;
    width: 565px;
    color: #000;
    height: 120px;
    padding-left: 1px;
    padding-top: 1px;
    font-family: "Tahoma", Geneva, sans-serif;
    font-size: 10pt;
    border: groove 1px #e5eaf1;
    position: inherit;
    text-decoration: none;  
}

Answer 2

你可能会发现很多插件都是这样做的。但是如果你想自己动手，请遵循以下步骤（这只包含基本功能）

定义一个span或div，如下所示

$(document).ready(function(){
  $('#originalTextBox').hide()
  $('#mockTextBox').click(function(){
    $('#mockTextBox').hide()
    $('#originalTextBox').show()
  })
})

首先隐藏textarea并将span / div显示为文本框。

然后定义事件

#mockTextBox
{
  width:300px;
  height:50px;
  border:1px solid;
}

#originalTextBox
{
  width:300px;
  height:50px;
  resize:none;
}

相应地应用CSS，你得到了你想要的东西。

$(document).ready(function() {
  $('#originalTextBox').hide()
  $('#mockTextBox').click(function() {
    $('#mockTextBox').hide()
    $('#originalTextBox').show()
  })
})

检查此示例http://codepen.io/Midhun052/pen/mVByzK

我已经将bootstrap类添加到上面的codepen中的文本区域，以获得漂亮的外观。

刚刚更新

更多CSS和图片

#mockTextBox
{
  width:300px;
  height:50px;
  border:1px solid;
  display:inline-block;
  margin-top:10px;
    border: 1px solid #337ab7;
  
}

#txt
{
 border:1px solid; 
 display:inline;
  height:20px;
  
}

#originalTextBox
{
    width: 310px;
    height: 100px;
    resize: none;
    border: 1px solid #337ab7;
    background-color: #337ab7;
    margin: 10px;
}

#originalTextBox textarea
{
 
  resize:none;
  margin:5px;
  width:300px;
}

.class2
{
     float: right;
    margin-top: 12px;
    margin-right: 2px;
}

.imgF1
{
  width:20px;
  height:20px;
  margin:5px
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="container">  
  <div id="mockTextBox">   
    <img src="http://lorempixel.com/46/46"/>
    <div id="txt">What's Happening ?</div>
    <img class="class2" src="http://lorempixel.com/16/16"/>
  </div>
  <div id="originalTextBox">
  <textarea  class="form-control">
  </textarea>
    <img class="imgF1" src="http://lorempixel.com/46/46">Post your photo</img>
  </div>
</div>

body {
    background-image: url("background.png");
    background-repeat: repeat;
}

使用bootstrap的类似Twitter的推文框

2 个答案: