移除搜索栏placeholder属性并添加文本的技术问题

我有一个带有placeholder文本的搜索栏，需要先移除placeholder属性，再向搜索栏输入框中添加新文本。

已实现功能 #

搜索栏初始会显示placeholder文本，且当前代码能成功移除该属性，现有代码如下：

HTML #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="search-bar" class="input-group custom-search">
  <input type="text" value="" class="form-control custom-search-input" placeholder="Search here">
    <button class="btn btn-primary custom-search-botton" type="submit">Search</button>  
</div>

CSS #

.custom-search {
    position: relative;
    margin-bottom: 2.5%;
}

.buttons .custom-search-input {
    width: 30%;
    padding-right: 15px !important; 
    box-sizing: border-box;
    font-size: 2vh;
}

.custom-search-button {
    position: absolute;
    right: 0px; 
    top: 0px;
    bottom: 0px;
    line-height: 1 !important;
    z-index: 4;        
}

JS #

//On result of operation this removes the placeholder text in the search bar
$(document).ready(function(){
  $(':input').removeAttr('placeholder');
});

遇到的问题 #

添加以下代码后，预期是移除placeholder并向搜索栏输入框添加“You have searched”文本，实际却替换了整个搜索栏，导致搜索栏不再显示：

$(document).ready(function(){
  $(':input').removeAttr('placeholder');
  $("#search-bar").text('You have searched');
});

已尝试方案 #

• 以下jQuery脚本仅替换了placeholder，未成功向输入框添加文本：

$(document).ready(function(){
  $(':input').removeAttr('placeholder');
  $("#search-bar").val('You have searched');
});

• 以下JS脚本出现与上述相同问题，直接移除搜索栏仅显示文本：

document.getElementById("search-bar").innerText = "You have searched";

再次说明：我并非要替换placeholder，而是需要移除该属性并向搜索栏输入框添加文本，恳请提供解决方案。

解决方案 #

核心问题是你选错了操作对象：#search-bar是包含输入框和按钮的外层容器，直接对它用.text()或.val()会破坏原有结构，你需要直接定位到输入框元素进行操作。

方案1（jQuery） #

$(document).ready(function(){
  // 选中输入框，移除placeholder属性
  $('.custom-search-input').removeAttr('placeholder');
  // 给输入框设置文本内容
  $('.custom-search-input').val('You have searched');
});

也可以用链式调用简化代码：

$(document).ready(function(){
  $('.custom-search-input')
    .removeAttr('placeholder')
    .val('You have searched');
});

方案2（原生JS） #

如果不想依赖jQuery，原生JS写法如下：

document.addEventListener('DOMContentLoaded', function(){
  const searchInput = document.querySelector('.custom-search-input');
  searchInput.removeAttribute('placeholder');
  searchInput.value = 'You have searched';
});

关键说明 #

• 用.custom-search-input类选择器精准定位输入框，避免影响页面其他元素。
• .val()（jQuery）和element.value（原生JS）是专门用于设置表单输入框内容的方法，不能用在普通div元素上。
• innerText/textContent是用来设置普通元素的文本内容，不适用于输入框这类表单控件。

内容的提问来源于stack exchange，提问作者e-driver1