input

Overview

Defines a single-line text input control.

Application Scope

Subelements

None

Attributes

In addition to general attributes, the attributes listed in the following table are supported.

Styles

The input element supports the active pseudo-class. In addition to common styles, the styles listed in the following table are supported.

Events

The input element supports the change event, which will be triggered when the status of checked changes. In addition to common events, the events listed in the following table are supported.

Methods

Sample Code

<template>
    <div class="container">
        <!-- Various types of input examples -->
        <div class="input-item">
            <text class="input-hint">input type="text"</text>
            <input class="input-text" id="selectionInput" placeholder="please enter text" maxlength="100" style="placeholder-color:#FF0000;caret-color:#7b68ee;"
                value="{{inputValue}}" onchange="updateValue" onselectionchange="selectionchange"></input>
            <div class="input-item1">
                <input class="input-button color-3" type="button"  value="set focus true"
                    onclick="truefocus">
               </input>
                <input class="input-button color-3" type="button"  value="set focus false"
                    onclick="falsefocus">
               </input>
                <input class="input-button color-3" type="button" value="Set the value" onclick="setValue">
               </input>
                <input class="input-button color-3" type="button" value="clear the value" onclick="resetValue">
               </input>
                <input class="input-button color-3" type="button" value="select all" onclick="selectAll">
               </input>
                <input class="input-button color-3" type="button" value="select [0-2]" onclick="setSelectionRange">
               </input>
                <input class="input-button color-3" type="button" value="get select []" onclick="getSelectionRange">
               </input>
            </div>
        </div>
        <div class="input-item">
            <text class="input-hint">input type="password"</text>
            <input class="input-text" type="password" placeholder="please enter password" onchange="showChangePrompt"></input>
        </div>
        <!-- radio -->
        <div class="input-item">
            <text class="input-hint">input type="radio":</text>
            <div class="doc-row">
                <label target="radio1">label1:</label>
                <input id="radio1" class="flex-grow" type="radio" name="radio" value="radio1" onchange="showChangePrompt">
               </input>
                <label target="radio2">label2:</label>
                <input id="radio2" class="flex-grow" type="radio" name="radio" value="radio2" checked="true" onchange="showChangePrompt">
               </input>
                <label target="radio3">label3:</label>
                <input id="radio3" class="flex-grow" type="radio" name="radio" value="radio3" onchange="showChangePrompt">
               </input>
            </div>
        </div>
        <!-- checkbox -->
        <div class="input-item">
            <text class="input-hint">input type="checkbox":</text>
            <div class="doc-row">
                <label target="checkbox1">label1:</label>
                <input id="checkbox1" class="flex-grow" type="checkbox" name="checkbox" value="checkbox1" onchange="showChangePrompt">
               </input>
                <label target="checkbox2">label2:</label>
                <input id="checkbox2" class="flex-grow" type="checkbox" name="checkbox" value="checkbox2" checked="true"
                    onchange="showChangePrompt">
               </input>
                <label target="checkbox3">label3:</label>
                <input id="checkbox3" class="flex-grow" type="checkbox" name="checkbox" value="checkbox3" onchange="showChangePrompt">
               </input>
            </div>
        </div>
        <!-- Set the enterkeytype and enterkeyclick examples -->
        <div class="input-item">
            <text class="input-hint">enterkeytype = next search [go] done send default</text>
            <input class="input-text" enterkeytype="go" onenterkeyclick="enterkeyclicked" placeholder="enterkeytype = go"
                onchange="showChangePrompt" style="background-color:#fafafa;">
            </input>
        </div>
        <div class="input-item">
            <text class="input-hint">enterkeytype = next search go [done] send default</text>
            <input class="input-text" enterkeytype="done" onenterkeyclick="enterkeyclicked" placeholder="enterkeytype = done"
                onchange="showChangePrompt" style="background-color:#fafafa;">
            </input>
        </div>
        <div class="input-item">
            <text class="input-hint">enterkeytype = next search go done [send] default</text>
            <input class="input-text" enterkeytype="send" onenterkeyclick="enterkeyclicked" placeholder="enterkeytype = send"
                onchange="showChangePrompt" style="background-color:#fafafa;">
            </input>
        </div>
        <div class="input-item">
            <text class="input-hint">enterkeytype = next search go done send [default]</text>
            <input class="input-text" onenterkeyclick="enterkeyclicked" placeholder="enterkeytype = default" onchange="showChangePrompt"
                style="background-color:#fafafa;">
            </input>
        </div>
        <!-- font-family -->
        <div class="input-item">
            <input class="input-text input-fontfamily" value="this input font-family is serif" style="background-color:#fafafa;margin-bottom:30px;"></input>
        </div>
    </div>
</template>
<style>
    .container {
        flex: 1;
        flex-direction: column;
    }
    .input-item {
        margin-bottom: 80px;
        margin-top: 10px;
        flex-direction: column;
    }
    .input-item1 {
        margin: 20px;
        flex-direction: row;
        justify-content:space-between;
        align-items: center;
        flex-wrap: wrap;
    }
    .input-hint {
        margin-left: 30px;
        margin-bottom: 30px;
        margin-right: 30px;
    }
    .doc-row {
        justify-content: center;
        margin-left: 30px;
        margin-right: 30px;
    }
    .flex-grow {
        flex-grow: 1;
    }
    .input-text {
        height: 80px;
        line-height: 80px;
        padding-left: 30px;
        padding-right: 30px;
        margin-left: 30px;
        margin-right: 30px;
        border-top-width: 1px;
        border-bottom-width: 1px;
        border-color: #999999;
        font-size: 30px;
        background-color: #ffffff;
    }
    .input-text:focus {
        border-color: #f76160;
    }
    .input-button {
        font-size: 30px;
         margin-top: 10px;
        border-radius: 5px;
        color: #ffffff;
         background-color: #00bfff;
    }
    .input-fontfamily {
        font-family: serif;
    }
</style>
<script>
    import prompt from '@system.prompt'
    export default {
        data: {
            inputValue: ''
        },
        onInit() {
            this.$page.setTitleBar({ text: 'input1' });
        },
        updateValue(e) {
            this.inputValue = e.value;
        },
        setValue() {
            this.inputValue = "hello world";
        },
        resetValue() {
            this.inputValue = ''
        },
        showChangePrompt(e) {
            prompt.showToast({
                message: (e.name === undefined ? '' : '---name: ' + e.name)
                    + (e.value === undefined ? '' : '---value: ' + e.value)
                    + (e.checked === undefined ? '' : '---checked: ' + e.checked)
                    + (e.text === undefined ? '' : '---text: ' + e.text)
            })
        },
        enterkeyclicked(e) {
            let msg = "enterkeyclicked-->" + "value:" + e.value;
            console.log(msg);
            prompt.showToast({ message: msg });
        },
        truefocus(e) {
            this.$element('selectionInput').focus({ focus: true })
            prompt.showToast({
                message: "get focus"
            })
        },
        falsefocus(e) {
            this.$element('selectionInput').focus({ focus: false })
            prompt.showToast({
                message: "lose focus"
            })
        },
        showClickPrompt(msg) {
            prompt.showToast({
                message: msg
            })
        },
        selectAll() {
            this.$element('selectionInput').select();
        },
        setSelectionRange() {
            this.$element('selectionInput').setSelectionRange({ start: 0, end: 3 });
            //start=3 end=3 Can move the cursor to index=3
            //this.$element('selectionInput').setSelectionRange({start : 3, end : 3});  
        },
        getSelectionRange() {
            this.$element('selectionInput').getSelectionRange({
                callback: function (start, end) {
                    let msg = "getSelectionRange start:" + start + " end:" + end;
                    prompt.showToast({
                        message: msg
                    })
                }
            })
        },
        selectionchange() {
            console.log("selectionchange");
        }
    }
</script>

The following figure shows the final effect.

Version Change History

Links

[h2]FAQs

• What should I do if I want to display a pop-up indicating that the number of input characters exceeds the specified value?
• After the text box of the input element is displayed, how do I implement the following effect: click other places to lose the focus and collapse the keyboard?
• Can I set the display position of the cursor in the input element?

[h2]Cases

• Failed to Obtain an Input Value
• Unmasking a Password
• No Response to Taps on a Button Implemented by the Input Element