Javascript -文本输入字段的值在不同文本输入字段上手动输入时消失

Question

谢谢你点击我的帖子！我是一个公认的非常新手程序员，只学习东西，使我的非编程工作的工作流程更方便。我试图创建一个脚本，以自动化咨询预约在我们公司的案例管理网站。为此，我能够制作一个基于像素识别的Autohotkey脚本，但由于屏幕分辨率的不同，它不能转移给同事。我是用Python和Selenium网络驱动程序实现的，但这太慢了。所以，唉，我决定学习Javascript。我遇到了一个路障，这是我第一次需要一个社区的帮助。

我的代码只是简单地更改文本输入字段的值：

document.querySelector("#first_name").value = "Jane"

我已经在有问题的案例管理网站和通用Gmail帐户创建页面上测试了这段代码。

在创建Gmail帐户时，代码工作得非常完美。

在Gmail帐户创建中成功执行代码

如您所见，我用Javascript将第一个name字段的值设置为"Jane“，并且能够在姓氏字段中手动键入"Doe”。我能够通过手动完成密码字段来创建Gmail帐户，并且不需要手动或其他方式将名字输入字段的焦点对准。

这在案件管理网站上行不通。我可以将名字输入字段的值设置为"Jane“，但是手动单击姓氏字段并键入任何内容都会立即导致名称输入字段的值消失。"Jane“会消失，只留下”名字“褪色的占位符文本，就在我在姓氏输入字段中输入第一个字母的那一刻。

值集

它不见了。

当我最后一次尝试在发布之前自己解决这个问题时，我第一次发现，我通过Javascript设置的值可以说是“真实的”。我为我对如何从技术上解释我发现的行为缺乏知识而道歉。我意识到，在将name输入字段的值设置为"Jane“之后，我可以手动单击name输入字段，并在”Jane“之后手动键入文本。当我手动单击姓氏输入字段并手动键入文本时，"Jane“实际上不再消失了！我很惊讶，我刚刚输入了"Wtf“作为姓氏。毫无疑问，JaneDoe Wtf成功地作为一个客户提交到我们的网站作为一个联系人。因此，这就抛开了我使用event.preventDefault()的所有尝试解决方案，以及相关的思路，认为我应该处理一个事件，或者用表单提交lol解决问题。

JaneDoe Wtf诞生

我怀疑我使用的输入字段是一个jQuery对象，因为单击蓝色“”按钮后弹出了“”表单。然而，我研究和尝试使用jQuery和DOM的各种解决方案的尝试都没有成功。

以下是相关网站代码的截图。相关div的代码片段如下所示。值得注意的是，该代码不存在于网站页面的源代码中，我怀疑这是问题的根源。

​

/*
* 提示：该行代码过长，系统自动注释不进行高亮。一键复制会移除系统注释 
* <div class="ReactModalPortal"><div class="ReactModal__Overlay ReactModal__Overlay--after-open react-modal-overlay"><div class="ReactModal__Content ReactModal__Content--after-open react-modal" tabindex="-1" role="dialog" aria-label="Modal"><div class="react-modal-content popup new-client-modal react-draggable" style="touch-action: none; width: 800px; visibility: initial; transform: translate(0px, 0px);"><div class="modal-header"><div class="header-left-group"><h1 class="mb-0 h5"><span class="modal-title">Add Contact</span></h1></div><div class="header-right-group"><button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button></div></div><div class="modal-body"><form><div class="bootstrap form-component"><div><div class="form-group row"><label for="first_name" class="col-sm-3 col-form-label">Name</label><div class="col"><div class=""><div class="row no-gutters"><div class="col-5 pr-2"><div><div class=""><div class="input-group"><input id="first_name" name="first_name" class="form-control " type="text" placeholder="First Name" autocomplete="off" data-testid="first_name" value=""></div></div></div></div><div class="col-2"><div><div class=""><div class="input-group"><input id="middle_initial" name="middle_initial" class="form-control " type="text" placeholder="M" autocomplete="off" data-testid="middle_initial" value=""></div></div></div></div><div class="col-5 pl-2"><div><div class=""><div class="input-group"><input id="last_name" name="last_name" class="form-control " type="text" placeholder="Last Name" autocomplete="off" data-testid="last_name" value=""></div></div></div></div></div></div></div></div><div class="form-group row"><label for="email" class="col-sm-3 col-form-label">Email</label><div class="col"><div><div class=""><div class="input-group"><input id="email" name="email" class="form-control " type="text" placeholder="example@email.com" autocomplete="off" data-testid="email" value=""></div></div></div></div></div><div class="form-group row"><label for="contact_group" class="col-sm-3 col-form-label">Contact Group</label><div class="col"><div class=""><div class="row "><div class="col-4 test-contact-group"><div><div class=""><select id="contact_group" name="contact_group" class="form-control custom-select col "><option value="759487">Client</option><option value="759490">Co-counsel</option><option value="759488">Expert</option><option value="759489">Judge</option><option value="842855">Notary</option><option value="874268">Opposing Party</option><option value="759491">Unassigned</option></select></div></div></div><button type="button" class="btn btn-link">Add new contact group</button></div></div></div></div><div class="form-group row"><label for="login_enabled" class="col-sm-3 col-form-label">Enable Client Portal</label><div class="col"><div class="test-enable-client-portal-switch"><div class="d-inline-flex align-items-center"><div class="switch switch--checked"><div class="switch-track"><div class="switch-track-check"><svg width="14" height="11" viewBox="0 0 14 11" xmlns="http://www.w3.org/2000/svg"><title>switch-check</title><path d="M11.264 0L5.26 6.004 2.103 2.847 0 4.95l5.26 5.26 8.108-8.107L11.264 0" fill="#fff" fill-rule="evenodd"></path></svg></div><div class="switch-track-x"><svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><title>switch-x</title><path d="M9.9 2.12L7.78 0 4.95 2.828 2.12 0 0 2.12l2.83 2.83L0 7.776 2.123 9.9 4.95 7.07 7.78 9.9 9.9 7.776 7.072 4.95 9.9 2.12" fill="#fff" fill-rule="evenodd"></path></svg></div></div><div class="switch-thumb"></div><input class="switch-screenreader-only" type="checkbox" data-testid="switch-field" id="login_enabled" name="login_enabled"></div><label for="login_enabled" class="ml-2 mb-0"></label></div><div><div><div>Securely share documents, invoices, and messages with your client. They will receive a welcome email with login instructions. Your client will only have access to items that you explicitly share.</div><a href="https://help.mycase.com/s/article/What-will-my-client-see-when-I-invite-them-to-the-portal" target="_blank" rel="noopener noreferrer">What will my clients see?</a></div></div></div></div></div><div class="form-group row"><label for="cell_phone" class="col-sm-3 col-form-label">Cell phone</label><div class="col"><div><div><div class=""><div class="input-group"><input id="cell_phone" name="cell_phone" class="form-control " type="tel" placeholder="(xxx)-xxx-xxxx" data-testid="cell_phone" value=""></div></div></div></div></div></div><div class="form-group row"><label for="work_phone" class="col-sm-3 col-form-label">Work phone</label><div class="col"><div><div class=""><div class="input-group"><input id="work_phone" name="work_phone" class="form-control col-6" type="text" placeholder="Work" autocomplete="off" data-testid="work_phone" value=""></div></div></div></div></div><div class="form-group row"><label for="home_phone" class="col-sm-3 col-form-label">Home phone</label><div class="col"><div><div class=""><div class="input-group"><input id="home_phone" name="home_phone" class="form-control col-6" type="text" placeholder="Home" autocomplete="off" data-testid="home_phone" value=""></div></div></div></div></div><div class="form-group row"><label for="address1" class="col-sm-3 col-form-label">Address</label><div class="col"><div><div class=""><div class="input-group"><input id="address1" name="address1" class="form-control " type="text" placeholder="Address" autocomplete="off" data-testid="address1" value=""></div></div></div></div></div><div class="form-group row"><label for="address2" class="col-sm-3 col-form-label">Address 2</label><div class="col"><div><div class=""><div class="input-group"><input id="address2" name="address2" class="form-control " type="text" placeholder="Address 2" autocomplete="off" data-testid="address2" value=""></div></div></div></div></div><div class="form-group row"><label for="city_state_zipcode_city" class="col-sm-3 col-form-label">City, State, Zip Code</label><div class="col"><div class="row "><div class="pr-2 col-6"><input id="city_state_zipcode_city" name="city_state_zipcode_city" placeholder="City" autocomplete="off" type="text" class="form-control form-control" value=""></div><div class="p-0 col-2"><select id="city_state_zipcode_state" name="city_state_zipcode_state" class="custom-select form-control form-control"><option value=""></option><option title="Alaska" value="AK">AK</option><option title="Alabama" value="AL">AL</option><option title="Arkansas" value="AR">AR</option><option title="Arizona" value="AZ">AZ</option><option title="California" value="CA">CA</option><option title="Colorado" value="CO">CO</option><option title="Connecticut" value="CT">CT</option><option title="Washington, D.C." value="DC">DC</option><option title="Delaware" value="DE">DE</option><option title="Florida" value="FL">FL</option><option title="Georgia" value="GA">GA</option><option title="Hawaii" value="HI">HI</option><option title="Iowa" value="IA">IA</option><option title="Idaho" value="ID">ID</option><option title="Illinois" value="IL">IL</option><option title="Indiana" value="IN">IN</option><option title="Kansas" value="KS">KS</option><option title="Kentucky" value="KY">KY</option><option title="Louisiana" value="LA">LA</option><option title="Massachusetts" value="MA">MA</option><option title="Maryland" value="MD">MD</option><option title="Maine" value="ME">ME</option><option title="Michigan" value="MI">MI</option><option title="Minnesota" value="MN">MN</option><option title="Missouri" value="MO">MO</option><option title="Mississippi" value="MS">MS</option><option title="Montana" value="MT">MT</option><option title="North Carolina" value="NC">NC</option><option title="North Dakota" value="ND">ND</option><option title="Nebraska" value="NE">NE</option><option title="New Hampshire" value="NH">NH</option><option title="New Jersey" value="NJ">NJ</option><option title="New Mexico" value="NM">NM</option><option title="Nevada" value="NV">NV</option><option title="New York" value="NY">NY</option><option title="Ohio" value="OH">OH</option><option title="Oklahoma" value="OK">OK</option><option title="Oregon" value="OR">OR</option><option title="Pennsylvania" value="PA">PA</option><option title="Rhode Island" value="RI">RI</option><option title="South Carolina" value="SC">SC</option><option title="South Dakota" value="SD">SD</option><option title="Tennessee" value="TN">TN</option><option title="Texas" value="TX">TX</option><option title="Utah" value="UT">UT</option><option title="Virginia" value="VA">VA</option><option title="Vermont" value="VT">VT</option><option title="Washington" value="WA">WA</option><option title="Wisconsin" value="WI">WI</option><option title="West Virginia" value="WV">WV</option><option title="Wyoming" value="WY">WY</option><option title="U.S. Armed Forces Americas" value="AA">AA</option><option title="U.S. Armed Forces Europe" value="AE">AE</option><option title="U.S. Armed Forces Pacific" value="AP">AP</option><option title="American Samoa" value="AS">AS</option><option title="Micronesia" value="FM">FM</option><option title="Guam" value="GU">GU</option><option title="Marshall Islands" value="MH">MH</option><option title="Northern Mariana Islands" value="MP">MP</option><option title="Puerto Rico" value="PR">PR</option><option title="Virgin Islands" value="VI">VI</option></select></div><div class="pl-2 col-4"><input id="city_state_zipcode_zipcode" name="city_state_zipcode_zipcode" placeholder="Zip Code" autocomplete="off" type="text" class="form-control form-control" value=""></div></div></div></div><div class="form-group row"><label for="country" class="col-sm-3 col-form-label">Country</label><div class="col"><select id="country" name="country" class="custom-select form-control"><option value=""></option><option value="US">United States</option><option value="CA">Canada</option><option value="AF">Afghanistan</option><option value="AX">Åland Islands</option><option value="AL">Albania</option><option value="DZ">Algeria</option><option value="AD">Andorra</option><option value="AO">Angola</option><option value="AI">Anguilla</option><option value="AG">Antigua &amp; Barbuda</option><option value="AR">Argentina</option><option value="AM">Armenia</option><option value="AQ">Antarctica</option><option value="AS">American Samoa</option><option value="AW">Aruba</option><option value="AU">Australia</option><option value="AT">Austria</option><option value="AZ">Azerbaijan</option><option value="BS">Bahamas</option><option value="BH">Bahrain</option><option value="BD">Bangladesh</option><option value="BB">Barbados</option><option value="BY">Belarus</option><option value="BE">Belgium</option><option value="BZ">Belize</option><option value="BJ">Benin</option><option value="BM">Bermuda</option><option value="BT">Bhutan</option><option value="BO">Bolivia</option><option value="BA">Bosnia &amp; Herzegovina</option><option value="BW">Botswana</option><option value="BV">Bouvet Island</option><option value="BR">Brazil</option><option value="IO">British Indian Ocean Territory</option><option value="VG">British Virgin Islands</option><option value="BN">Brunei</option><option value="BG">Bulgaria</option><option value="BF">Burkina Faso</option><option value="BI">Burundi</option><option value="KH">Cambodia</option><option value="CM">Cameroon</option><option value="CV">Cape Verde</option><option value="BQ">Caribbean Netherlands</option><option value="KY">Cayman Islands</option><option value="CF">Central African Republic</option><option value="TD">Chad</option><option value="CL">Chile</option><option value="CN">China</option><option value="CX">Christmas Island</option><option value="CC">Cocos (Keeling) Islands</option><option value="CO">Colombia</option><option value="KM">Comoros</option><option value="CG">Congo - Brazzaville</option><option value="CD">Congo - Kinshasa</option><option value="CK">Cook Islands</option><option value="CR">Costa Rica</option><option value="HR">Croatia</option><option value="CU">Cuba</option><option value="CW">Curaçao</option><option value="CY">Cyprus</option><option value="CZ">Czechia</option><option value="CI">Côte d’Ivoire</option><option value="DK">Denmark</option><option value="DJ">Djibouti</option><option value="DM">Dominica</option><option value="DO">Dominican Republic</option><option value="EC">Ecuador</option><option value="EG">Egypt</option><option value="SV">El Salvador</option><option value="GQ">Equatorial Guinea</option><option value="ER">Eritrea</option><option value="EE">Estonia</option><option value="ET">Ethiopia</option><option value="FK">Falkland Islands</option><option value="FO">Faroe Islands</option><option value="FJ">Fiji</option><option value="FI">Finland</option><option value="FR">France</option><option value="GF">French Guiana</option><option value="PF">French Polynesia</option><option value="TF">French Southern Territories</option><option value="GA">Gabon</option><option value="GM">Gambia</option><option value="GE">Georgia</option><option value="DE">Germany</option><option value="GH">Ghana</option><option value="GI">Gibraltar</option><option value="GR">Greece</option><option value="GL">Greenland</option><option value="GD">Grenada</option><option value="GP">Guadeloupe</option><option value="GU">Guam</option><option value="GT">Guatemala</option><option value="GG">Guernsey</option><option value="GN">Guinea</option><option value="GW">Guinea-Bissau</option><option value="GY">Guyana</option><option value="HT">Haiti</option><option value="HM">Heard &amp; McDonald Islands</option><option value="HN">Honduras</option><option value="HK">Hong Kong SAR China</option><option value="HU">Hungary</option><option value="IS">Iceland</option><option value="IN">India</option><option value="ID">Indonesia</option><option value="IR">Iran</option><option value="IQ">Iraq</option><option value="IE">Ireland</option><option value="IM">Isle of Man</option><option value="IL">Israel</option><option value="IT">Italy</option><option value="JM">Jamaica</option><option value="JP">Japan</option><option value="JE">Jersey</option><option value="JO">Jordan</option><option value="KZ">Kazakhstan</option><option value="KE">Kenya</option><option value="KI">Kiribati</option><option value="XK">Kosovo</option><option value="KW">Kuwait</option><option value="KG">Kyrgyzstan</option><option value="LA">Laos</option><option value="LV">Latvia</option><option value="LB">Lebanon</option><option value="LS">Lesotho</option><option value="LR">Liberia</option><option value="LY">Libya</option><option value="LI">Liechtenstein</option><option value="LT">Lithuania</option><option value="LU">Luxembourg</option><option value="MO">Macau SAR China</option><option value="MK">Macedonia</option><option value="MG">Madagascar</option><option value="MW">Malawi</option><option value="MY">Malaysia</option><option value="MV">Maldives</option><option value="ML">Mali</option><option value="MT">Malta</option><option value="MH">Marshall Islands</option><option value="MQ">Martinique</option><option value="MR">Mauritania</option><option value="MU">Mauritius</option><option value="YT">Mayotte</option><option value="MX">Mexico</option><option value="FM">Micronesia</option><option value="MD">Moldova</option><option value="MC">Monaco</option><option value="MN">Mongolia</option><option value="ME">Montenegro</option><option value="MS">Montserrat</option><option value="MA">Morocco</option><option value="MZ">Mozambique</option><option value="MM">Myanmar (Burma)</option><option value="NA">Namibia</option><option value="NR">Nauru</option><option value="NP">Nepal</option><option value="NL">Netherlands</option><option value="AN">Netherlands Antilles</option><option value="NC">New Caledonia</option><option value="NZ">New Zealand</option><option value="NI">Nicaragua</option><option value="NE">Niger</option><option value="NG">Nigeria</option><option value="NU">Niue</option><option value="NF">Norfolk Island</option><option value="KP">North Korea</option><option value="MP">Northern Mariana Islands</option><option value="NO">Norway</option><option value="OM">Oman</option><option value="PK">Pakistan</option><option value="PW">Palau</option><option value="PS">Palestinian Territories</option><option value="PA">Panama</option><option value="PG">Papua New Guinea</option><option value="PY">Paraguay</option><option value="PE">Peru</option><option value="PH">Philippines</option><option value="PN">Pitcairn Islands</option><option value="PL">Poland</option><option value="PT">Portugal</option><option value="PR">Puerto Rico</option><option value="QA">Qatar</option><option value="RE">Réunion</option><option value="RO">Romania</option><option value="RU">Russia</option><option value="RW">Rwanda</option><option value="WS">Samoa</option><option value="SM">San Marino</option><option value="ST">São Tomé &amp; Príncipe</option><option value="SA">Saudi Arabia</option><option value="SN">Senegal</option><option value="RS">Serbia</option><option value="SC">Seychelles</option><option value="SL">Sierra Leone</option><option value="SG">Singapore</option><option value="SX">Sint Maarten</option><option value="SK">Slovakia</option><option value="SI">Slovenia</option><option value="SB">Solomon Islands</option><option value="SO">Somalia</option><option value="ZA">South Africa</option><option value="GS">South Georgia &amp; South Sandwich Islands</option><option value="KR">South Korea</option><option value="SS">South Sudan</option><option value="ES">Spain</option><option value="LK">Sri Lanka</option><option value="BL">St. Barthélemy</option><option value="SH">St. Helena</option><option value="KN">St. Kitts &amp; Nevis</option><option value="LC">St. Lucia</option><option value="MF">St. Martin</option><option value="PM">St. Pierre &amp; Miquelon</option><option value="VC">St. Vincent &amp; Grenadines</option><option value="SD">Sudan</option><option value="SR">Suriname</option><option value="SJ">Svalbard &amp; Jan Mayen</option><option value="SZ">Swaziland</option><option value="SE">Sweden</option><option value="CH">Switzerland</option><option value="SY">Syria</option><option value="TW">Taiwan</option><option value="TJ">Tajikistan</option><option value="TZ">Tanzania</option><option value="TH">Thailand</option><option value="TL">Timor-Leste</option><option value="TG">Togo</option><option value="TK">Tokelau</option><option value="TO">Tonga</option><option value="TT">Trinidad &amp; Tobago</option><option value="TN">Tunisia</option><option value="TR">Turkey</option><option value="TM">Turkmenistan</option><option value="TC">Turks &amp; Caicos Islands</option><option value="TV">Tuvalu</option><option value="UM">U.S. Outlying Islands</option><option value="UG">Uganda</option><option value="UA">Ukraine</option><option value="AE">United Arab Emirates</option><option value="GB">United Kingdom</option><option value="UY">Uruguay</option><option value="UZ">Uzbekistan</option><option value="VU">Vanuatu</option><option value="VA">Vatican City</option><option value="VE">Venezuela</option><option value="VN">Vietnam</option><option value="VI">U.S. Virgin Islands</option><option value="WF">Wallis &amp; Futuna</option><option value="EH">Western Sahara</option><option value="YE">Yemen</option><option value="ZM">Zambia</option><option value="ZW">Zimbabwe</option></select></div></div><div><button type="button" class="btn btn-link p-0 border-0 form-group">Add More Information <i class="fas fa-sort-down align-text-top"></i></button></div><div><button type="button" class="btn btn-link p-0 border-0 form-group">Custom Fields <i class="fas fa-sort-down align-text-top"></i></button></div></div></div><div class="justify-content-between modal-footer"><button type="button" class="btn btn-link">Cancel</button><div><button type="submit" class="mr-1 btn btn-secondary">Save &amp; Add Case</button><button type="submit" class="btn btn-cta-primary">Save Contact</button></div></div></form></div></div></div></div></div>
*/

​

我真的很感谢你的帮助，如果我需要提供更多的信息，请随时告诉我。

更新。我想出了如何复制我遇到问题的网页的HTML DOM树和CSS，并复制了整个HTML DOM树和CSS，并将它们粘贴到代码片段工具中，然后运行。堆栈溢出的代码片段工具使用Add表单复制了网页。但是我用相同的Javascript方法更改了名字输入文本字段的值，并且.我可以手动键入姓氏输入文本字段很好。我在真实网页上遇到的问题并不发生在模拟的网页中，即使是使用完全相同的HTML树和CSS。由于30,000个字符的限制，我不能发布整个HTML和CSS，但我很困惑。关于我还应该看什么还有什么建议吗？我不知道真正的网页是否有自己的Javascript在手动输入时擦除我的值，但不知道如何检查以确保。@-@

​

​

Answer 1

它很可能是管理网站使用阴影DOM。如果它使用React或角作为前端，情况就是这样。所有输入元素的值都存储在阴影DOM (javascript)中，每当页面重发器时，对活动DOM的更改就会被覆盖。这些框架将监视元素上的事件并保存javascript变量中的更改，但是使用javascript更改元素值不会生成任何事件。

如果您创建一个虚拟“输入”事件并在元素上触发该事件，它应该会导致阴影DOM检测到更改，并且它将被适当地保存。

您可以像这样模拟这个事件：

element.dispatchEvent(new Event('input'));