suchen

Heim >Web-Frontend >js-Tutorial >Zwei JS-Methoden zum Hinzufügen kleiner Symbole zur Eingabe

Zwei JS-Methoden zum Hinzufügen kleiner Symbole zur Eingabe

小云云
小云云Original
2017-12-22 10:36:534160Durchsuche

In diesem Artikel stellen wir hauptsächlich zwei JS-Methoden vor, um der Eingabe kleine Symbole hinzuzufügen. Beim Erstellen einer Website müssen Sie häufig die Funktion für kleine Symbole zur Eingabe hinzufügen Die Implementierung ist etwas schwierig. Der folgende Editor stellt Ihnen zwei Methoden zum Hinzufügen kleiner Symbole in JS Input vor. Freunde, die es benötigen, können es Ihnen helfen.

Methode 1

Fügen Sie das kleine Symbol als Hintergrund der Eingabe ein, geben Sie einfach den Code ein: 


<style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }
      input{
        border: none;
      }
      .box{
        height: 50px;
        background: yellow;
      }
      .box input{
        width: 200px;
        height: 30px;
        border-radius: 15px;
        margin: 10px 0;
        background: url(image/search.gif) no-repeat;
        background-color: white;
        background-position: 3px;
        padding-left: 30px;
        border: 1px solid black;
        outline: none;
      }
    </style>
  </head>
  <body>
    <p class="box">
      <input type="text" class="username" value="搜索"/>
    </p>
  </body>

Methode 2

Verwenden Sie das i-Tag, um 


<style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }
      .box{
        width: 200px;
        position: relative;
      }
      .box .icon-search{
        background: url(image/search.gif) no-repeat;
        width: 20px;
        height: 20px;
        position: absolute;
        top: 6px;
        left: 0;
      }
      .box .username{
        padding-left: 30px;
        height: 25px;
      }
    </style>
  </head>
  <body>
    <p class="box">
      <i class="icon-search"></i>
      <input type="text" class="username" value="搜索"/>
    </p>
  </body>
einzufügen

Verwandte Empfehlungen:

JS-Nachahmung Alipay-Eingabe Eingabeanzeige digitale Lupe

Detaillierte Erläuterung der Fuzzy-Prompt-Funktion der Javascript-Eingabe Eingabefeld

So unterscheiden Sie Eingabefelder und Schaltflächen

Das obige ist der detaillierte Inhalt vonZwei JS-Methoden zum Hinzufügen kleiner Symbole zur Eingabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Einführung in den Befehl v for in der Vue-Komponente und Analyse von Alarmproblemen bei der Verwendung von v-forNächster Artikel：Einführung in den Befehl v for in der Vue-Komponente und Analyse von Alarmproblemen bei der Verwendung von v-for

In Verbindung stehende Artikel

Mehr sehen