Question

我正在尝试将一个随机数设置为ons输入（signup_txtCodigo）的值，但是每当我尝试推送页面时，它只会向我显示警告，提醒我检查该随机数并停留在该位置。这是页面模板：

<!--External user register-->
        <template id="signup.html">
            <ons-page id="login-page" modifier="full_bg">
                <ons-toolbar modifier="transparent">
                    <div class="center" style="font-size:150%;color:#f0f0f0">Estacionamiento UdeG</div>
                    <div class="left"><ons-back-button>Volver</ons-back-button></div>
                </ons-toolbar>
                <div align="center">
                    <br><img src="https://quimicabasicacucei.files.wordpress.com/2013/02/logo-udg.png?w=316" alt="logo" height=250px><br>
                    <p style="color:#f0f0f0">Registrar usuario</p>
                    <table>
                        <tr>
                            <td style="color:#f0f0f0">Código:</td>
                            <td><div contenteditable><ons-input input-id="signup_txtCodigo" type="text" modifier="underbar" readonly></ons-input></div></td>  //this is the input I'm trying to change
                        </tr>
                        <tr>
                            <td style="color:#f0f0f0">Nombre:</td>
                            <td><ons-input input-id="signup_txtNombre" type="text" modifier="underbar" placeholder="Nombre"></ons-input></td>
                        </tr>
                        <tr>
                            <td style="color:#f0f0f0">Placa:</td>
                            <td><ons-input input-id="signup_txtPlaca" type="text" modifier="underbar" placeholder="Ej. A1B-2C3" maxlength="7"></ons-input></td>
                        </tr>
                        <tr>
                            <td style="color:#f0f0f0">Teléfono:</td>
                            <td><ons-input input-id="signup_txtTelefono" type="text" modifier="underbar" placeholder="Teléfono" maxlength="10"></ons-input></td>
                        </tr>
                        <tr>
                            <td style="color:#f0f0f0">Contraseña:</td>
                            <td><ons-input input-id="signup_txtPassword" type="password" modifier="underbar" placeholder="Contraseña" maxlength="10"></ons-input></td>
                        </tr>
                    </table><br>
                    <ons-button onclick="signup()" modifier="cta">Enviar</ons-button>
                    <ons-button onclick="cleanSignUp()" >Limpiar</ons-button><br><br>
                </div>
            </ons-page>
        </template>

此函数应将值分配给输入并推入页面：

//load signup page
        function externalUserPage(){
            var random = Math.floor((Math.random() * 999999999) + 111111111);
            alert(random);
            document.getElementById("signup_txtCodigo").value = random
            document.querySelector('#myNavigator').pushPage('signup.html', {data: {title: 'signup'}});
        }

先谢谢您

Answer 1

您正在使用The Content Template element，并且必须删除dot中的id。

所以改变

<template id="signup.html">

到

<template id="signuphtml">

您可以像这样访问模板的内容

var content = document.querySelector('template#signuphtml').content;

使用document.importNode

访问您的元素

var clone = document.importNode(content, true);
var signup_txtCodigo = clone.querySelector("[input-id='signup_txtCodigo']");

现在您可以使用The textContent property

进行填写

此处为插图

//load signup page
        (function externalUserPage(){
            var random = Math.floor((Math.random() * 999999999) + 111111111);
            alert(random);
      
            var content = document.querySelector('template#signuphtml').content;
    
var clone = document.importNode(content, true);
    var signup_txtCodigo = clone.querySelector("[input-id='signup_txtCodigo']");
    signup_txtCodigo.innerHTML = random;
  //document.getElementById("signup_txtCodigo").value = random
          console.log(signup_txtCodigo);  document.querySelector('#myNavigator').pushPage('signup.html', {data: {title: 'signup'}});
        })();

<!--External user register-->
        <template id="signuphtml">
            <ons-page id="login-page" modifier="full_bg">
                <ons-toolbar modifier="transparent">
                    <div class="center" style="font-size:150%;color:#f0f0f0">Estacionamiento UdeG</div>
                    <div class="left"><ons-back-button>Volver</ons-back-button></div>
                </ons-toolbar>
                <div align="center">
                    <br><img src="https://quimicabasicacucei.files.wordpress.com/2013/02/logo-udg.png?w=316" alt="logo" height=250px><br>
                    <p style="color:#f0f0f0">Registrar usuario</p>
                    <table>
                        <tr>
                            <td style="color:#f0f0f0">Código:</td>
                            <td><div contenteditable><ons-input input-id="signup_txtCodigo" type="text" modifier="underbar" readonly></ons-input></div></td>  //this is the input I'm trying to change
                        </tr>
                        <tr>
                            <td style="color:#f0f0f0">Nombre:</td>
                            <td><ons-input input-id="signup_txtNombre" type="text" modifier="underbar" placeholder="Nombre"></ons-input></td>
                        </tr>
                        <tr>
                            <td style="color:#f0f0f0">Placa:</td>
                            <td><ons-input input-id="signup_txtPlaca" type="text" modifier="underbar" placeholder="Ej. A1B-2C3" maxlength="7"></ons-input></td>
                        </tr>
                        <tr>
                            <td style="color:#f0f0f0">Teléfono:</td>
                            <td><ons-input input-id="signup_txtTelefono" type="text" modifier="underbar" placeholder="Teléfono" maxlength="10"></ons-input></td>
                        </tr>
                        <tr>
                            <td style="color:#f0f0f0">Contraseña:</td>
                            <td><ons-input input-id="signup_txtPassword" type="password" modifier="underbar" placeholder="Contraseña" maxlength="10"></ons-input></td>
                        </tr>
                    </table><br>
                    <ons-button onclick="signup()" modifier="cta">Enviar</ons-button>
                    <ons-button onclick="cleanSignUp()" >Limpiar</ons-button><br><br>
                </div>
            </ons-page>
        </template>

Answer 2

您不能更改标记为readonly的字段，应使用disabled

<ons-input input-id="signup_txtCodigo" type="text" modifier="underbar" disabled></ons-input>

Answer 3

为了给该输入赋值，请检查函数是否被调用或您是否在document.ready中编写了该函数。

对于我的想法，此示例应该可行：

$( document ).ready(function() {
     var random = Math.floor((Math.random() * 999999999) + 111111111);
     document.getElementById("signup_txtCodigo").value = random;
});

参考链接：Input Text value Property

Answer 4

只需将input-id="signup_txtCodigo"更改为id="signup_txtCodigo"

我在Google上进行了快速搜索，但据我所知，input-id不是有效的OnSen元素属性，因此您无法通过常规JavaScript手段通过ID进行选择。

JavaScript无法更改输入值

4 个答案: