Javascript 如何让两个不同的输入（一个用于移动设备，一个用于桌面）修改同一个变量？

所以我的问题是，我想创建两个不同的输入，但是让它们修改相同的变量。基本上，我有一个输入，只有在手机和平板电脑的折叠导航栏中才可见，另一个在桌面和更大屏幕的页面中心可见

输入值是修改var username。我遇到的问题是，它似乎只接受第一次出现的输入的值。所以，如果我在桌面上，第二个输入没有返回任何内容，但它是显示的唯一输入

我尝试过为输入分配公共id和名称，但没有效果。如果我使用手机，输入的效果与预期一样。我认为这是因为在代码中，mobile输入字段出现在desktop输入字段之前

以下是适用的HTML：

<nav class="visible-xs visible-sm navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsed" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

    </div>
    <div class="collapse navbar-collapse" id="collapsed">
      <ul class="nav navbar-nav">
        <li><a href="#trackList">Tracks</a></li>
        <li><a href="#queueList">Queue</a></li>
        <li>
        <input name="userSearch" type="text" class="form-control " placeholder=" SC.com/*PUT THIS PART IN THE SEARCH*">
      </input>
      <button class="btn" id="tracks">Tracks :)</button>
      <button class="btn" id="favorites">Favorites :)</button>
      <button class="btn" id="clearQueue">Clear My Queue</button>
        </li>

      </ul>
    </div>
  </div>
</nav>
<div id="queueApp" class="wrapper">
  <div class="row col-md-12">
    <div class="col-md-4 pages">
      <h1>Your Tracks, Fam</h1>
      <span class="prev">
      <span class="prevPage glyphicon glyphicon-backward"></span>
      <p class="prevPage">Previous</p>
      </span>
      <span class="next">
      <p class="nextPage">Next</p>
      <span class="nextPage glyphicon glyphicon-forward"></span>
      </span>


    </div>

    <div class="col-md-4 search visible-md visible-lg">
      <input name="userSearch" type="text" class="form-control " placeholder=" SC.com/*PUT THIS PART IN THE SEARCH*">
      </input>
      <button class="btn" id="tracks">Tracks :)</button>
      <button class="btn" id="favorites">Favorites :)</button>
      <button class="btn" id="clearQueue">Clear My Queue</button>
    </div>
  </div> 

---

有什么想法吗？

您应该添加一些更改侦听器并更改第二个

的名称，然后在提交时使用该值（如果不需要提交，则可能不需要）

---

使用

：可见的

选择器

username = $("input[name=userSearch]:visible").val();

---

$（“输入[name=userSearch]：可见”）

将是可见的输入字段。

以下是一种方法：

创建两个输入，一个手机和一个桌面。然后使用媒体查询将其更改为移动

 .mobile{display: none}
@media (max-width: 600px){
  .mobile{display: inline;}
  .desktop{display: none;}
}

---

这太棒了！非常感谢你。然而，我意识到输入的按钮不起作用。它们看起来像：

$（“#轨迹”）.off（“click”）.on（“click”，gettrack）我本来打算在id后面加上：visible，但这似乎不起作用。有什么想法吗？回答了我自己的问题：）。必须将选择器更改为类，并且它工作得非常完美。非常感谢。
     var valueOfLastModifiedInput;
$( '.input-listener' ).on( 'change', function( e ) {
   valueOfLastModifiedInput = $( this ).val(); 
} ); 
function getTracks(){
      titleList.length = 0;
      artistList.length = 0;
      imgList.length = 0;
      idList.length = 0;
         $(".trackList").html("");
        username = valueOfLastModifiedInput;
        subSection = "tracks";
        getAPIURL(username, subSection); 
        getAPI(apiurl);
} 

username = $("input[name=userSearch]:visible").val();

 .mobile{display: none}
@media (max-width: 600px){
  .mobile{display: inline;}
  .desktop{display: none;}
}