Blinkenden Cursor in einem Eingabefeld programmieren

#1
Hallo zusammen,

mit welchem Code bzw. Befehl kann ich einstellen das der Cursor in einem Eingabefeld immer blinkt, egal ob man in das Eingabefeld rein klickt oder nicht.
Der HTML und CSS Code von meinem Eingabefeld ist unten.

Es grüßt Tony449


HTML:

HTML:
<div id="suchbox1">
  <div id="helfer">
  <input id="suchetext1" maxlength="3"  type="text" placeholder=" HH">
  </div>
    <script>
    inhal=document.getElementById('suchetext1');
   inhal.addEventListener('keyup',function(){

    if(inhal.value.length>=1){

      inhal.style.background='white';
    } else{
         inhal.style.background='none';
    }
    })
  </script>
</body>

CSS:


CSS:
*{
    margin:0;
  padding:0;
}
body{
  display:flex;
  flex-direction:column;
}
#suchetext::placeholder{
    color:red;
    background:rgba(0,0,0,0.4);
    text-align:center;
}
/*
#suchetext1:focus{
  background:white;
}
*/
#suchetext:focus::placeholder{
    color:green;
    background:rgba(0,0,255,0.0);
    text-align:left;
    font-size:12px;
}
#suchbox,#suchbox1{
    display:flex;
    min-width:150px;
    width:80vw;
    max-width:650px;
    ?background:rgba(255,255,255,1);
    border-radius:10px;
    padding:10px 30px;
    border:1px solid white;
    justify-content:center;
    margin:auto;
      margin-top:20px;
}
#suchetext,#helfer{
  background-image:url(https://finanz-check21.de/wp-content/uploads/2019/08/Kfz-Versicherungsvergleich.png);
  background-size:calc(100% + 19px) calc(100% + 14px);
background-repeat:no-repeat;
    background-position:-11px -7px;
  height:63px;
   width:70%;
  max-width:300px;
  min-width:150px;
  border:4px solid black;
  border-radius:5px;
  outline:none;
  font-size:33px;
  color:red;
  font-weight:900;
  /*
  background-color:rgba(0,0,0,0.3);
  background-blend-mode: color;
  */
}
#suchetext:focus{

   background-image:url(https://finanz-check21.de/wp-content/uploads/2019/08/Kfz-Versicherungsvergleich.png), rgba(0,0,0,1);
       background-size:calc(50% + 22px) calc(50% + 14px);
      background-position:calc(50% - 11px) calc(200% - 7px);
}
#suchetext1{
  padding:0;
  width:20%;
  height:55px;
  background:none;
  font-size:27px;
  outline:none;
  font-weight:900;
  margin:0px 0 0 15%;
}
#helfer{
  display:flex;
}
#butt,#butt1{
    border:4px solid black;
  border-radius:5px;
  font-size:27px;
  height:43px;
  nin-width:150px;
  width:49%;
  max-width:300px;
}

@media only screen and (max-width:400px){
  #suchbox{
    display:flex;
    justify-content:center;
    flex-direction:column;

  }
  #suchbox > input{
    margin:5px auto;
  }
}
 
#3
Das funktioniert nicht so, wie ich mir das dachte, der Cursor blinkt zwar ständig, aber beim reinklicken in das Eingabefeld sieht man zwei Cursor. Wenn man in das Eingabefeld klickt, ist es ja für die Eingabe sozusagen "aktiviert" gibt es nicht ein Code bzw. Befehl, womit das Eingabefeld automatisch aktiviert ist?
Denn dann würde auch der Cursor ständig blinken.
 

lord_haffi

Well-Known Member
c-b Experte
#4
Wäre doch total unsinnig? Das Feld ist schließlich nicht deaktiviert, sondern einfach nur nicht im Fokus. Und es kann immer nur ein Objekt im Fokus stehen. Möglicherweise kann man ja die Animation vom Cursor bei einem Fokus deaktivieren (was ich allerdings für unwahrscheinlich halte), aber ich wüsste nicht, wozu dieser ganze Umstand gut sein sollte :confused:
Falls es darum geht, dass du in ein und dasselbe Textfeld schreiben möchtest, sobald du eine Taste drückst, auch wenn eben dieses nicht im Fokus ist, kannst du möglicherweise dem body-Element einen keydown-EventListener o.ä. verpassen..
 
#5
Okay, ich habe es jetzt mit dem Befehl autofocus hinbekommen, der Cursor blinkt jetzt durchgängig. Jetzt würde ich den Cursor gerne noch etwas nach rechts verschieben, damit man Ihn besser sehen kann, wie könnte man das machen?
 
Oben