使用引导程序的类似 Twitter 的推文框

Question

您好，我真的需要您的帮助。我一直在谷歌上搜索如何制作一个类似于 twitter 的“发生了什么”框的推文框，供用户使用 bootstrap 3 发布新内容，但到目前为止我找不到任何接近的东西。

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

Answer 1

您可能会发现很多插件都可以做到这一点。但如果你想自己做，请按照以下步骤操作（这仅包含基本功能）

定义如下所示的跨度或 div

  <div class="container">
  <div id="mockTextBox">
    What's Happening ?
  </div></br>
  <textarea id="originalTextBox" class="form-control">
  </textarea>
</div>

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

然后定义事件

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

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

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

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

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

我已将引导类添加到上面代码笔中的文本区域以获得漂亮的外观。

刚刚更新

更多 CSS 和图片

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

#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>

Answer 2

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

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

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

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

更新答案：

使用 CSS 来设置文本区域的样式，这里不需要 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;  
}