：专注::选择发行后

我有一个问题与::选择后，我的继承人代码：：专注::选择发行后

HTML：

... 

<div class="post"> 
    <form> 
     <textarea placeholder="Message Here..." maxlength="255"></textarea> 
    </form> 
</div> 

...

CSS：

.wrapper .left_section .profile_small .post form textarea:focus::after { 
    content:"<input type='submit' value='Post' />"; 
}

所以当文区域被选中（焦点）我想提交按钮出现。有谁知道解决方案？

在此先感谢。

来源

2014-04-24 user3352340

这可能有助于：http://stackoverflow.com/questions/2587669/css-after-pseudo-element-on-input-field 不幸的是，我认为'：before'和'：after' pseudoelements don' t工作在输入或textareas – Haroldchen

@Haroldchen - 绝对正确，它将需要被包装在说，'div' – SW4

加，你不能使用伪元素来生成全新的HTML元素。因为它们是*伪元素。您的需求最好由脚本来完成。 – BoltClock

这里的另一个帮助一些jQuery的：

<html> 
<head> 
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script type="text/javascript"> 
     function onFocus(){ 

     } 

     $(document).ready(function(){ 
     $("#myTextArea").on("focus" , function(){ 
      var btn = document.createElement("button") 
      $(btn).append("submit"); 
      $(btn).attr("id" , "mySubmit"); 
      $("#container").append(btn); 
     }) 

     $("#myTextArea").on("blur" , function(){ 
      $("#mySubmit").remove(); 
     }) 
     })   
    </script> 
<head> 
<body> 
    <span id="container"> 
     <textarea id="myTextArea"> 
     </textarea> 
    </span> 
</body>

希望它可以帮助你，干杯！

来源

2014-04-24 11:54:11 MRodriguez08

好的代码，虽然它的方式太复杂了（需要查看后）。不管怎么说，还是要谢谢你！ – user3352340

不能在CSS中的内容标签使用HTML我所知道的

来源

2014-04-24 12:00:08 InvisibleUn1corn

$(document).ready(function() { 
    $(".create_post").focus(function() { 
     $(".create_post").after("<input class='submit_post' type='submit' value='Post' />"); 
     $(".profile").css("margin-bottom","71px"); 
    }); 
    $(".create_post").focusout(function() { 
     $(".submit_post").remove(); 
     $(".profile").css("margin-bottom",""); 
    }); 
});

作品。

来源

2014-04-24 23:10:26 user3352340

您可以使用CSS一般兄弟选择做你想做—什么，但你必须提交按钮第一放入您的HTML：http://jsfiddle.net/teddyrised/qRtX6/

<div class="post"> 
    <form> 
     <textarea placeholder="Message Here..." maxlength="255"></textarea> 
     <input type="submit" value="Post" /> 
    </form> 
</div>

对于你的CSS：

input[type='submit'] { 
    display: none; 
} 
textarea:focus ~ input[type='submit'] { 
    display: block; 
}

注意：提交按钮必须放置之后的 textarea元素，如一般连续兄弟选择器只能工作在downstre am（即它不会寻找textarea之前的兄弟姐妹，因此名字连续的）。

来源

2014-04-24 23:14:31 Terry

哇，没有意识到这样的东西可以通过CSS完成，很好的例子！ – user3352340

：专注::选择发行后

回答

相关问题