亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

輸入框永遠不會清除 - 但在 codepen 上工作正常

輸入框永遠不會清除 - 但在 codepen 上工作正常

元芳怎么了 2022-12-02 16:09:36
我有一個簡單的輸入表單。<div id="inputboxforemailandpassword">  <label for="inputEmail" class="sr-only">Email address</label>  <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required>  <label for="inputPassword" class="sr-only">Password</label>  <input type="password" id="inputPassword" class="form-control" placeholder="Password" required></div>    <hr>       <div id="apistatusmessage">  <p>loading...</p></div>        <button id = "buttonregister" class="btn btn-lg btn-primary btn-block" onclick="registration()" >  register</button>     <button id = "clearinput" class="btn btn-lg btn-primary btn-block" onclick="clearouttheinputboxes()" >  clearinput</button>  這是我正在使用的明確功能。function clearouttheinputboxes(){    var logopener="----entering clearouttheinputboxes----";    console.log(logopener);        //collect the email address and password.    var emailaddress = document.getElementById("inputEmail");    var password = document.getElementById("inputPassword");    emailaddress.setAttribute('value', "");    password.setAttribute('value', "");    var logcloser="----leaving clearouttheinputboxes----";    console.log(logcloser);    }我已經在我的代碼筆上復制了這個，在這里。https://codepen.io/jay-pancodu/pen/oNbVrVV問題是這樣的。a) 在 codepen 上，完全相同的代碼可以很好地清除輸入框。b）在我的網絡應用程序上，無論我嘗試清除多少次以及我在值中使用哪個值，輸入框都會保留。那么，我在這里做錯了什么。更新 1 - 很多評論建議我使用類似這樣的東西password.value = "some value"; 這并不能解決我的問題。請檢查我是否在 codepen 中獲得了輸出。不想使用 .value 方法。更新 2 - 看起來 CodePen 代碼也不起作用更新 3 - 在 CodePen 上重現問題能夠在輸入任何內容之前設置和清除輸入框。但是一旦你在框中輸入，設置和清除值的能力就會丟失
查看完整描述

4 回答

?
德瑪西亞99

TA貢獻1770條經驗 獲得超3個贊

.setAttribute('value', "")用下面提到的方法替換方法應該有效


function clearouttheinputboxes()

    {

        var logopener="----entering clearouttheinputboxes----";

        console.log(logopener);    

    

        //collect the email address and password.

    

        var emailaddress = document.getElementById("inputEmail");

        var password = document.getElementById("inputPassword");

    

        // emailaddress.setAttribute('value', "");

        // password.setAttribute('value', "");


        //replace the above 2 lines with the below code

    

        emailaddress.value = "";

        password.value = "";

    

        var logcloser="----leaving clearouttheinputboxes----";

        console.log(logcloser);    

    }


查看完整回答
反對 回復 2022-12-02
?
慕田峪7331174

TA貢獻1828條經驗 獲得超13個贊

我認為您可能使問題過于復雜，并為看似非常簡單的任務使用了太多功能。我相信，除非用戶實際上自己輸入了一些數據，否則目標是在表單輸入中clear或（某個預定值）？set為此，也許以下內容可能會引起興趣 - 一個函數處理兩個按鈕clear并且set（不確定第三個按鈕用于）


document.addEventListener('DOMContentLoaded',e=>{


    let div=document.getElementById('inputboxforemailandpassword');

    let col=div.querySelectorAll('input[name="email"],input[name="password"]');

    

    let clickhandler=function(e){

        col.forEach( input=>{

            switch( this.textContent.toLowerCase() ){

                case 'clear':

                    if( input.value=='' || input.value==input.dataset.example )input.value='';

                break;

                case 'set':

                    if( input.value=='' && input.value!=input.dataset.example )input.value=input.dataset.example;

                break;

            }

        })

    };

    

    div.querySelectorAll('button').forEach( bttn=>{

        bttn.addEventListener( 'click', clickhandler );

    });

});

label{display:block;width:100%;margin:0.25rem auto;}

label input{float:right}

fieldset{border:1px dotted gray;margin:0.5rem auto}

<div id='inputboxforemailandpassword'>

    <fieldset>

        <label class='sr-only'>

            Email address 

            <input type='email' name='email' class='form-control' placeholder='Email address' data-example='[email protected]' autocomplete='off' autofocus='true' required />

        </label>

        

        <label class='sr-only'>

            Password

            <input type='password' name='password' class='form-control' placeholder='Password' data-example='P45$W0rd' autocomplete='off' required />

        </label>

    </fieldset>

    

    <fieldset>

      <button class='btn btn-lg btn-primary btn-block'>clear</button>    

      <button class='btn btn-lg btn-primary btn-block'>set</button>

    </fieldset>

</div>


查看完整回答
反對 回復 2022-12-02
?
侃侃無極

TA貢獻2051條經驗 獲得超10個贊

嘗試這個element.value=""


function clearouttheinputboxes()

{

    var logopener="----entering clearouttheinputboxes----";

    console.log(logopener);    


    //collect the email address and password.

    var emailaddress = document.getElementById("inputEmail");

    var password = document.getElementById("inputPassword");


    emailaddress.value=""

    password.value=""


    var logcloser="----leaving clearouttheinputboxes----";

    console.log(logcloser);    

}

<div id="inputboxforemailandpassword">

  <label for="inputEmail" class="sr-only">Email address</label>

  <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required>

  <label for="inputPassword" class="sr-only">Password</label>

  <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>

</div>    

<hr>       

<div id="apistatusmessage">

  <p>loading...</p>

</div>        

<button id = "buttonregister" class="btn btn-lg btn-primary btn-block" onclick="registration()" >

  register

</button>     

<button id = "clearinput" class="btn btn-lg btn-primary btn-block" onclick="clearouttheinputboxes()" >

  clearinput

</button>  


查看完整回答
反對 回復 2022-12-02
?
倚天杖

TA貢獻1828條經驗 獲得超3個贊

您可以直接更改任何輸入字段的值 = ''（空白）


我正在稍微更新您的代碼。我在做什么，是直接改變輸入字段的值。


function clearouttheinputboxes() {

   var logopener="----entering clearouttheinputboxes----";

   console.log(logopener);    


  //----directly changing values of the input fields by "id"

  document.getElementById("inputEmail").value = '';

  document.getElementById("inputPassword").value = '';



  var logcloser="----leaving clearouttheinputboxes----";

  console.log(logcloser);    

}


如果您遇到問題，請發表評論或回復，以便我更好地理解問題。


查看完整回答
反對 回復 2022-12-02
  • 4 回答
  • 0 關注
  • 156 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號