首页 > javascript > 在移动设备上切换bootstrap input-group-addon和input的位置

在移动设备上切换bootstrap input-group-addon和input的位置 (Switching position of bootstrap input-group-addon & input when on mobile)

问题

我尝试在移动设备上使用两个输入并使用其显示和可见性来更改bootstrap input-group-addon的位置。从前端可见性的角度来看,我得到了我想要的东西,输入现在在插件后面...但我在#input-newsearch上运行一些javascript,而在移动设备上则无法正常工作。它看起来仍然在看第一个输入。我错过了什么或如何解决这个问题?

HTML:

<div class="input-group">
<input id="input-newsearch" class="form-control input-newsearch-desktop" type="text">                                                                                                                                           
<span class="input-group-addon" id="delete-newsearch">Delete</span>
<span class="input-group-addon" id="remove-newsearch">Remove</span>
<input id="input-newsearch" class="form-control input-newsearch-mobile" type="text">                                                                                                                                                    
</div>  

CSS:

.input-newsearch-mobile {
display: none;
visibility: hidden;
}   

@media (max-width: 768px){
.input-newsearch-desktop {
    display: none;
    visibility: hidden;     
}
.input-newsearch-mobile {
    display: initial;
    visibility: initial;        
}           
}

JavaScript的:

$('#delete-newsearch, #delete-newsearch').on('click', function() { 
$('#input-newsearch').val('');                                          
}); 

$('#input-newsearch').autocomplete({
source:'/source.php',  
minLength: 3,
...
});

解决方法

我不会使用Id作为您的选择,而是使用类。

它没有按照您的意图工作的原因是因为Id预计只出现一次。当您有多个具有相同Id的元素并尝试引用其中一个时,它会导致问题。

样式

添加了课程 input-newsearch

<div class="input-group">
<input id="input-newsearch" class="form-control input-newsearch input-newsearch-desktop" type="text">                                                                                                                                           
<span class="input-group-addon" id="delete-newsearch">Delete</span>
<span class="input-group-addon" id="remove-newsearch">Remove</span>
<input id="input-newsearch" class="form-control input-newsearch input-newsearch-mobile" type="text">                                                                                                                                                    
</div>  

使用Javascript

将Id选择器更改'#input-newsearch'为类'.input-newsearch'

$('#delete-newsearch, #delete-newsearch').on('click', function() { 
$('.input-newsearch').val('');                                          
}); 

$('.input-newsearch').autocomplete({
source:'/source.php',  
minLength: 3,
...
});

问题

I tried to change the position of bootstrap input-group-addon when on mobile by using two input and playing with their display and visibility. From a frontend visibility perspective I got what I want, the input is now behind the addons ... but I'm running some javascript on #input-newsearch and when on mobile it's not working. It looks like it's still looking at the first input. What am I missing or how can I solve this?

html:

<div class="input-group">
<input id="input-newsearch" class="form-control input-newsearch-desktop" type="text">                                                                                                                                           
<span class="input-group-addon" id="delete-newsearch">Delete</span>
<span class="input-group-addon" id="remove-newsearch">Remove</span>
<input id="input-newsearch" class="form-control input-newsearch-mobile" type="text">                                                                                                                                                    
</div>  

css:

.input-newsearch-mobile {
display: none;
visibility: hidden;
}   

@media (max-width: 768px){
.input-newsearch-desktop {
    display: none;
    visibility: hidden;     
}
.input-newsearch-mobile {
    display: initial;
    visibility: initial;        
}           
}

javascript:

$('#delete-newsearch, #delete-newsearch').on('click', function() { 
$('#input-newsearch').val('');                                          
}); 

$('#input-newsearch').autocomplete({
source:'/source.php',  
minLength: 3,
...
});

解决方法

Instead of using Id's as your selection I would use a class instead.

The reason it is not working as you intended is because Id's are expected to only show up once. It causes problems when you have multiple elements with the same Id and try to reference one of them.

Styles

Added the class input-newsearch

<div class="input-group">
<input id="input-newsearch" class="form-control input-newsearch input-newsearch-desktop" type="text">                                                                                                                                           
<span class="input-group-addon" id="delete-newsearch">Delete</span>
<span class="input-group-addon" id="remove-newsearch">Remove</span>
<input id="input-newsearch" class="form-control input-newsearch input-newsearch-mobile" type="text">                                                                                                                                                    
</div>  

Javascript

Changed Id selector '#input-newsearch' to the class '.input-newsearch'

$('#delete-newsearch, #delete-newsearch').on('click', function() { 
$('.input-newsearch').val('');                                          
}); 

$('.input-newsearch').autocomplete({
source:'/source.php',  
minLength: 3,
...
});
相似信息