📜  WML-事件(1)

📅  最后修改于: 2023-12-03 14:48:31.159000             🧑  作者: Mango

WML 事件

WML (Wireless Markup Language) 事件 是指在使用WML编写无线应用时,通过定义事件关联JavaScript函数,实现用户交互和数据处理等功能。WML事件通常包括“onenterforward”、“onenterbackward”、“onpick”、“oninput”等一系列事件。

WML 事件类型

onenterforward

onenterforward事件通常绑定在一个选择页面的“go”按钮上。该事件在页面传送到下一个页面之前触发,可以使用此事件执行数据验证或准备传送所需的数据。此事件被用于在进入下一个页面之前重新处理数据。

<card id="myCard" title="Input form">
    <p>
        <input type="text" name="firstName" />
    </p>
    <p>
        <input type="text" name="lastName" />
    </p>
    <p>
        <anchor>
            <go href="next.wmls" method="post" sendreferer="true" 
                onenterforward="return validateForm();">
                <img src="button.gif" alt="Continue" />
            </go>
        </anchor>
    </p>
</card>

onenterbackward

onenterbackward事件通常绑定在使用“prev”按钮返回上一页时。该事件在页面传送回前一个页面之前触发,它在用于捕获当前页面的状态,例如输入字段中的任何更改。在返回到上一页时,可以将这些更改重新应用于页面。

<card id="myCard" title="Input form">
    <p>
        <input type="text" name="firstName" />
    </p>
    <p>
        <input type="text" name="lastName" />
    </p>
    <p>
        <anchor>
            <prev href="prev.wmls" onenterbackward="return saveData();">
                <img src="button.gif" alt="Back" />
            </prev>
        </anchor>
    </p>
</card>

onpick

onpick事件用于从一个列表中选择一个选项时触发。使用pick元素和onpick属性来绑定处理程序。该事件在用户选择选项时被触发。例如,在一个使用pick元素来让用户从列表中选择一种颜色的页面上,可以在选项被选择时触发此事件,然后设定所选值。

<page title="Select Color">
    <p>Choose a color:</p>
    <select name="color" onpick="setColor()">
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
    </select>
    
    <p onenterforward="setColor()">Your choice:</p>
    <p id="colorChoice">none</p>
</page>

<script type="text/javascript">
    function setColor() {
        var select = document.forms[0].color;
        var selectedValue = select.options[select.selectedIndex].value;
        document.getElementById('colorChoice').innerHTML = selectedValue;
    }
</script>

oninput

oninput事件用于在WML中的页面上显示输入值的实时更新。在WML中,可以使用input元素和oninput属性将事件绑定到输入字段。通常,它使用这个事件来验证和过滤插入的数据。使用oninput属性绑定JavaScript函数,该函数将处理用户在输入字段中输入的内容。

<card id="myCard" title="Enter Username and Password">
    <input type="text" name="username" oninput="checkUsername()" />
    <input type="password" name="password" oninput="checkPassword()" />
    <p id="errorMsg" style="color:red;">Invalid input</p>
</card>

<script type="text/javascript">
    function checkUsername() {
        var usernameInput = document.forms[0].username;
        if(usernameInput.value.indexOf(' ') !== -1) {
            document.getElementById('errorMsg').innerHTML = 'Username contains white spaces.';
        } else {
            document.getElementById('errorMsg').innerHTML = '';
        }
    }
    
    function checkPassword() {
        var passwordInput = document.forms[0].password;
        if(passwordInput.value.length < 6) {
            document.getElementById('errorMsg').innerHTML = 'Password too short.';
        } else {
            document.getElementById('errorMsg').innerHTML = '';
        }
    }
</script>
总结

以上是WML中常用的事件类型和解释。使用WML事件,可以实现用户交互和数据验证等功能,为无线应用提供更好的用户体验。