输入框永远不会清除 - 但在 codepen 上工作正常

Question

我有一个简单的输入表单。

<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 上重现问题

能够在输入任何内容之前设置和清除输入框。但是一旦你在框中输入，设置和清除值的能力就会丢失

Answer 1

.setAttribute('value', "")用下面提到的方法替换方法应该有效function clearouttheinputboxes()&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; var logopener="----entering clearouttheinputboxes----";&nbsp; &nbsp; &nbsp; &nbsp; console.log(logopener);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; //collect the email address and password.&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; var emailaddress = document.getElementById("inputEmail");&nbsp; &nbsp; &nbsp; &nbsp; var password = document.getElementById("inputPassword");&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; // emailaddress.setAttribute('value', "");&nbsp; &nbsp; &nbsp; &nbsp; // password.setAttribute('value', "");&nbsp; &nbsp; &nbsp; &nbsp; //replace the above 2 lines with the below code&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; emailaddress.value = "";&nbsp; &nbsp; &nbsp; &nbsp; password.value = "";&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; var logcloser="----leaving clearouttheinputboxes----";&nbsp; &nbsp; &nbsp; &nbsp; console.log(logcloser);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }

Answer 2

我认为您可能使问题过于复杂，并为看似非常简单的任务使用了太多功能。我相信，除非用户实际上自己输入了一些数据，否则目标是在表单输入中clear或（某个预定值）？set为此，也许以下内容可能会引起兴趣 - 一个函数处理两个按钮clear并且set（不确定第三个按钮用于）document.addEventListener('DOMContentLoaded',e=>{&nbsp; &nbsp; let div=document.getElementById('inputboxforemailandpassword');&nbsp; &nbsp; let col=div.querySelectorAll('input[name="email"],input[name="password"]');&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; let clickhandler=function(e){&nbsp; &nbsp; &nbsp; &nbsp; col.forEach( input=>{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; switch( this.textContent.toLowerCase() ){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case 'clear':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if( input.value=='' || input.value==input.dataset.example )input.value='';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case 'set':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if( input.value=='' && input.value!=input.dataset.example )input.value=input.dataset.example;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; };&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; div.querySelectorAll('button').forEach( bttn=>{&nbsp; &nbsp; &nbsp; &nbsp; bttn.addEventListener( 'click', clickhandler );&nbsp; &nbsp; });});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'>&nbsp; &nbsp; <fieldset>&nbsp; &nbsp; &nbsp; &nbsp; <label class='sr-only'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Email address&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type='email' name='email' class='form-control' placeholder='Email address' data-example='[e-mail]' autocomplete='off' autofocus='true' required />&nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <label class='sr-only'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Password&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type='password' name='password' class='form-control' placeholder='Password' data-example='P45$W0rd' autocomplete='off' required />&nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; </fieldset>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <fieldset>&nbsp; &nbsp; &nbsp; <button class='btn btn-lg btn-primary btn-block'>clear</button>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; <button class='btn btn-lg btn-primary btn-block'>set</button>&nbsp; &nbsp; </fieldset></div>

Answer 3

尝试这个element.value=""function clearouttheinputboxes(){&nbsp; &nbsp; var logopener="----entering clearouttheinputboxes----";&nbsp; &nbsp; console.log(logopener);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; //collect the email address and password.&nbsp; &nbsp; var emailaddress = document.getElementById("inputEmail");&nbsp; &nbsp; var password = document.getElementById("inputPassword");&nbsp; &nbsp; emailaddress.value=""&nbsp; &nbsp; password.value=""&nbsp; &nbsp; var logcloser="----leaving clearouttheinputboxes----";&nbsp; &nbsp; console.log(logcloser);&nbsp; &nbsp;&nbsp;}<div id="inputboxforemailandpassword">&nbsp; <label for="inputEmail" class="sr-only">Email address</label>&nbsp; <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required>&nbsp; <label for="inputPassword" class="sr-only">Password</label>&nbsp; <input type="password" id="inputPassword" class="form-control" placeholder="Password" required></div>&nbsp; &nbsp;&nbsp;<hr>&nbsp; &nbsp; &nbsp; &nbsp;<div id="apistatusmessage">&nbsp; <p>loading...</p></div>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<button id = "buttonregister" class="btn btn-lg btn-primary btn-block" onclick="registration()" >&nbsp; register</button>&nbsp; &nbsp; &nbsp;<button id = "clearinput" class="btn btn-lg btn-primary btn-block" onclick="clearouttheinputboxes()" >&nbsp; clearinput</button>&nbsp;&nbsp;

Answer 4

您可以直接更改任何输入字段的值 = ''（空白）我正在稍微更新您的代码。我在做什么，是直接改变输入字段的值。function clearouttheinputboxes() {&nbsp; &nbsp;var logopener="----entering clearouttheinputboxes----";&nbsp; &nbsp;console.log(logopener);&nbsp; &nbsp;&nbsp;&nbsp; //----directly changing values of the input fields by "id"&nbsp; document.getElementById("inputEmail").value = '';&nbsp; document.getElementById("inputPassword").value = '';&nbsp; var logcloser="----leaving clearouttheinputboxes----";&nbsp; console.log(logcloser);&nbsp; &nbsp;&nbsp;}如果您遇到问题，请发表评论或回复，以便我更好地理解问题。