我正在学习HTML + CSS,我正在尝试在HTML / CSS中编写控制台模拟器。我有伪元素:: after的问题。我有<pre class="commands" contenteditable id="0"></pre>
,编辑命令的可编辑行是什么。我可以点击这一行并写一些东西,但当我写一些东西,例如“a”并删除它,我的“提示”(我认为这是英语中的好词)进入下一行,但它应该保留。如何防止这种情况?
我的代码:
错误404
答案 0 :(得分:1)
好吧,我找到了问题的原因,firefox
在<br>
标记中添加了<pre>
,我不明白为什么,它在chrome
中都没有发生,您的快速解决方案是:
pre br {
display: none;
}
$(document).ready(function(){
var line=0;
var type=document.getElementById(line);
var currentIndex=0;
var start=function(text){
currentIndex=0;
var interval=setInterval(function(){
if(text.length>currentIndex){
type.textContent+=text[currentIndex];
currentIndex++;
}
else{clearInterval(interval);}
},100
);
}
//start("How are you today?");
$(document).keypress(function(e){
console.log(e.keyCode);
switch(e.keyCode){
case 13: newLine(); break;
case 38: start(" Mateusz."); break;}
});
var newLine=function(){
line++;
$("#console").append('<div class="prompt">$</div><pre class="commands" id="'+line+'"></pre>');
type=document.getElementById(line);
}
});
&#13;
*{
border: 1px dashed gold;
}
pre br {
display: none;
}
#console{
background-color: black;
width: 600px;
height: 400px;
left: 0;
right: 0;
margin: auto;
border: 10px solid silver;
padding: 10px;
overflow-x: scroll;
}
.prompt{
color: green;
font-weight: bold;
font-family: monospace;
font-size: 14px;
display: block;
}
.prompt::before{
content: 'root@xubuntu ~ ';
color: lime;
}
.commands{
color: white;
display: inline;
font-family: monospace;
font-size: 14px;
}
.commands::after{
content: "|";
color: white;
width: 1px;
height: 1px;
background-color: white;
/*border: 1px solid white;*/
animation-name: ps1;
animation-duration: 1s;
animation-iteration-count: infinite;
display: inline;
}
@keyframes ps1{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
[contenteditable]:focus {
outline: 0px solid transparent;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="console">
<div class="prompt">$</div>
<pre class="commands" contenteditable id="0"></pre>
</div>
&#13;