Heim > Artikel > Web-Frontend > So erstellen Sie eine Eingabeaufforderung für ein dynamisches Texteingabefeld mit HTML, CSS und jQuery

So erstellen Sie eine Eingabeaufforderung für ein dynamisches Texteingabefeld mit HTML, CSS und jQuery

王林Original: 2023-10-24 09:16:491472Durchsuche

So erstellen Sie eine dynamische Texteingabefeld-Eingabeaufforderung mit HTML, CSS und jQuery

In der Webentwicklung werden dynamische Texteingabefeld-Eingabeaufforderungen häufig verwendet, um eine bessere Benutzererfahrung zu bieten. Indem Sie mögliche Eingabeoptionen in Echtzeit anzeigen, können Sie Benutzern helfen, schnell die richtigen Inhalte auszuwählen. In diesem Artikel erfahren Sie, wie Sie mit HTML, CSS und jQuery eine dynamische Texteingabefeld-Eingabeaufforderung erstellen, um das interaktive Erlebnis des Benutzers zu verbessern.

Zur Implementierung dieser Funktion sind HTML, CSS und jQuery erforderlich. Zuerst erstellen wir eine einfache HTML-Struktur wie unten gezeigt:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态文本输入框提示</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <label for="input">请输入内容</label>
        <input type="text" id="input" autocomplete="off">
        <ul id="suggestions"></ul>
    </div>

    <script src="jquery.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

Im obigen HTML-Code erstellen wir einen Container, der ein Eingabefeld und eine ungeordnete Liste enthält, die den vorgeschlagenen Inhalt anzeigt. Durch das Hinzufügen einer Beschriftung können wir umgehend Informationen zum Eingabefeld bereitstellen.

Als nächstes müssen wir CSS-Stile schreiben, um unser Eingabefeld und die vorgeschlagenen Inhalte zu verschönern. In der Datei styles.css können wir den folgenden Code hinzufügen: styles.css文件中，我们可以添加以下代码：

.container {
    position: relative;
    width: 300px;
    margin: 0 auto;
    padding-top: 20px;
}

label {
    display: block;
    margin-bottom: 10px;
}

input[type="text"] {
    width: 100%;
    padding: 10px;
    font-size: 16px;
}

ul {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

ul li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}

在上面的CSS代码中，我们设置了整体的容器样式，并对输入框和建议内容进行了一些基本的样式定义。注意，我们设置了建议内容列表的显示状态为display: none;，以便在用户输入内容时动态显示。

最后，我们需要使用jQuery编写一些脚本来实现文本输入框的提示功能。在script.js文件中，我们可以添加以下代码：

$(document).ready(function() {
    $('#input').on('input', function() {
        var input = $(this).val().toLowerCase();
        
        if (input.length > 0) {
            $('#suggestions').empty().show();
            
            // 模拟异步获取建议内容
            setTimeout(function() {
                var suggestions = ['apple', 'banana', 'cherry', 'durian', 'elderberry', 'fig', 'grape', 'honeydew'];
                
                suggestions.forEach(function(item) {
                    if (item.indexOf(input) > -1) {
                        $('<li>').text(item).appendTo('#suggestions');
                    }
                });
            }, 300);
        } else {
            $('#suggestions').empty().hide();
        }
    });
    
    $('body').on('click', '#suggestions li', function() {
        var text = $(this).text();
        $('#input').val(text);
        $('#suggestions').empty().hide();
    });
});

在上面的JavaScript代码中，我们首先通过$('#input').on('input', function() { ... })rrreee

Im obigen CSS-Code legen wir den gesamten Containerstil fest und nehmen einige grundlegende Änderungen am Eingabefeld und der Stildefinition für den Vorschlagsinhalt vor . Beachten Sie, dass wir den Anzeigestatus der Liste mit vorgeschlagenen Inhalten auf display: none; setzen, damit sie dynamisch angezeigt werden kann, wenn der Benutzer Inhalte eingibt.

Schließlich müssen wir jQuery verwenden, um einige Skripte zu schreiben, um die Eingabeaufforderungsfunktion des Texteingabefelds zu implementieren. In der Datei script.js können wir den folgenden Code hinzufügen:

rrreee

Im obigen JavaScript-Code übergeben wir zuerst $('#input').on('input', function() { ... }) um das Eingabeereignis des Eingabefelds abzuhören. Wenn der Benutzer mit der Eingabe beginnt, erhalten wir den eingegebenen Inhalt und führen basierend auf dem Inhalt eine empfohlene Filterung und Anzeige durch. Um die tatsächliche Erfassung von Vorschlagsinhalten zu simulieren, haben wir einen Timer verwendet und einige Beispielvorschlagsinhalte definiert.

Wenn der Benutzer auf ein Element im vorgeschlagenen Inhalt klickt, füllen wir den Inhalt des ausgewählten Elements in das Eingabefeld und blenden die Liste der vorgeschlagenen Inhalte aus. 🎜🎜Zu diesem Zeitpunkt haben wir die Implementierung dynamischer Texteingabefeld-Eingabeaufforderungen abgeschlossen. Durch die Kombination von HTML, CSS und jQuery können wir das Benutzererlebnis verbessern, indem wir passende Vorschläge in Echtzeit anzeigen, während der Benutzer tippt. 🎜🎜Ich hoffe, dieser Artikel kann Ihnen helfen zu verstehen, wie Sie mit HTML, CSS und jQuery eine dynamische Texteingabefeld-Eingabeaufforderung erstellen, und bietet Ihnen spezifische Codebeispiele als Referenz. Ich wünsche Ihnen viel Erfolg bei der Webentwicklung! 🎜

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Eingabeaufforderung für ein dynamisches Texteingabefeld mit HTML, CSS und jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery css html JS function 事件 display input

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：So verwenden Sie Layui, um Bildzieh- und Zoomeffekte zu erzielenNächster Artikel：So verwenden Sie Layui, um Bildzieh- und Zoomeffekte zu erzielen

In Verbindung stehende Artikel

Mehr sehen