userinput.qdoc

Go to the documentation of this file.

// Copyright (C) 2016 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
\page qtquick-usecase-userinput.html
\meta {keywords} {qmltopic}
\title Handling user input
\keyword Use Case - Responding To User Input in QML
\brief Example of how to accept user input and respond to it in a QML application
 
\section1 Supported types of user input
 
The \l {Qt Quick} module provides support for the most common types of user
input, including mouse and touch events, text input, and key-press events.
Other modules provide support for other types of user input.
 
This article covers how to handle basic user input. For information about
audio-visual input, see the \l {qtmultimedia-index.html}{Qt Multimedia}
documentation.
 
\section2 Mouse and touch events
 
The \l{Input Handlers}{input handlers} let QML applications handle mouse and
touch events. For example, you could create a button by adding a
\l TapHandler to an Image, or to a \l Rectangle with a \l Text object inside.
The \l TapHandler responds to taps or clicks on any type of pointing device.
 
\snippet qmlapp/usecases/userinput.qml 0
 
\note Some Item types have their own built-in input handling. For example,
\l Flickable responds to mouse dragging, touch flicking, and mouse wheel
scrolling.
 
\section2 Keyboard and button events
 
Button and key presses, from buttons on a device, a keypad, or a keyboard, can
all be handled using the \l Keys attached property. This attached property is
available on all \l Item derived types, and works with the \l Item::focus
property to determine which type receives the key event. For simple key
handling, you can set the focus to true on a single \l Item and do all your key
handling there.
 
\snippet qmlapp/usecases/userinput-keys.qml 0
 
For text input, we have several QML types to choose from. TextInput provides an
unstyled single-line editable text, while TextField is more suitable for
form fields in applications. TextEdit can handle multi-line editable text,
but TextArea is a better alternative as it adds styling.
 
The following snippet demonstrates how to use these types in your application:
 
\snippet qmlapp/usecases/userinput-text.qml 0
*/