如何更改外部加载的表单的占位符？

-1

我加载一个外部的JS创建一个窗体，我想改变其中一个输入的占位符。我尝试在包含表单的div的后面写入函数，并通过名称或类来定位输入。也许这只是加载脚本，防止占位的变化......如何更改外部加载的表单的占位符？

document.getElementsByClassName('squeezer-widget-input-code').placeholder = 'Enter your Code';

<script type="text/javascript" src="https://dl.squeezer.fr/widget"></script> 
 
<div class="squeezer-widget"></div>

来源

2017-09-05 Sam

这是一个重复的https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and -other-getelementsby-method – Quentin

如果在尝试更改占位符时已经创建了表单，则已创建？也许你会在加载widget之前尝试改变它。 –

@Quentin，表格是使用外部创建的，但是您的观点是有效的 – Satpal

您可以使用MutationObserver和监听DOM创造改变为<FORM>

var MutationObserver = window.MutationObserver; 
 
var list = document.querySelector('.squeezer-widget'); 
 

 
var observer = new MutationObserver(function(mutations) { 
 
    mutations.forEach(function(mutation) { 
 
    if (mutation.type === 'childList') { 
 
     var elem = document.querySelector('.squeezer-widget-input'); 
 
     if (elem != null) 
 
     document.querySelector('.squeezer-widget-input').placeholder = 'Enter your Code';  
 
    } 
 
    }); 
 
}); 
 

 
observer.observe(list, { 
 
    attributes: true, 
 
    childList: true, 
 
    characterData: true 
 
});

<script type="text/javascript" src="https://dl.squeezer.fr/widget"></script> 
 
<div class="squeezer-widget"></div>

注意：有是squeezer-widget-input-code选择没有元素，因此使用squeezer-widget-input

务必阅读What do querySelectorAll, getElementsByClassName and other getElementsBy* methods return?

来源

2017-09-05 12:30:19 Satpal

感谢很多@Satpal，它与'MutationObserve'的作品，我只是观察属性的变化并改变squeezer-widget-input-code的占位符（这是第一个输入） – Sam

如何更改外部加载的表单的占位符？

回答

相关问题