Question

我需要使用js清除输入字段的默认值，但到目前为止我的所有尝试都无法定位和清除字段。我希望在提交表单之前使用onSubmit来执行一个函数来清除所有默认值（如果用户没有更改它们）。

<form method='get' class='custom_search widget custom_search_custom_fields__search' onSubmit='clearDefaults' action='http://www.example.com' >
<input name='cs-Price-2' id='cs-Price-2' class='short_form' value='Min. Price' />
<input name='cs-Price-3' id='cs-Price-3' class='short_form'  value='Max Price' />
<input type='submit' name='search' class='formbutton' value=''/>
</form>

你将如何实现这一目标？

Answer 1

在页面首次加载时读取所有字段的ids +值（使用类似jquery的内容来获取所有“textarea”，“input”和“select”标签）
在提交时，将现在包含的值与加载页面时存储的值进行比较
用空值替换未更改的

如果仍然不清楚，请描述一下你陷入困境的地方，我会更深入地描述。

编辑：使用jQuery添加一些代码。它只适用于textarea-tag而且它不响应实际事件，但希望它能进一步解释这个想法：

// Keep default values here
var defaults = {};

// Run something like this on load
$('textarea').each(function(i, e) {
  defaults[$(e).attr('id')] = $(e).text();
});

// Run something like this before submit
$('textarea').each(function(i, e){
  if (defaults[$(e).attr('id')] === $(e).text())
    $(e).text('');
})

修改：添加更多代码以获取更详细的帮助。这应该是一些完整的代码（质量免责声明，因为我绝不是一个jQuery专家），只需要包含在你的页面上。除了给你的所有输入标签提供唯一的id和type =“text”之外，别无其他任何事情要做（但他们应该有这个）：

$(document).ready(function(){
  // Default values will live here
  var defaults = {};

  // This reads and stores all text input defaults for later use
  $('input[type=text]').each(function(){
    defaults[$(this).attr('id')] = $(this).text();
  });

  // For each of your submit buttons,
  // add an event handler for the submit event
  // that finds all text inputs and clears the ones not changed
  $('input[type=submit]').each(function(){
    $(this).submit(function(){
      $('input[type=text]').each(function(){
        if (defaults[$(this).attr('id')] === $(this).text())
          $(this).text('');
      });
    });
  });
});

如果这仍然没有任何意义，你应该阅读一些关于jQuery和/或javascript的教程。

Answer 2

注意：目前仅在Google Chrome和Safari中支持此功能。我不认为这是对您的问题的满意答案，但我认为应该注意如何在HTML 5中解决这个问题。

HTML 5引入了placeholder属性，除非被替换，否则不会提交：

<form>
  <input name="q" placeholder="Search Bookmarks and History">
  <input type="submit" value="Search">
</form>

进一步阅读：

Answer 3

1）您可以检查客户端的更改，而不是检查客户端的更改。

在Page_Init函数中，您将在viewstate＆amp;中存储值。文本字段中的值或您使用的控件。

您可以比较这些值，如果它们不相等，则将文本设置为空白。

2）请问，您想要实现哪些功能？

Answer 4

你可以通过在提交功能中使用它来实现它

function clearDefaults()
{
    if(document.getElementById('cs-Price-2').value=="Min. Price")
      {
              document.getElementById('cs-Price-2').value='';
      }

}

使用onsubmit清除默认值

4 个答案: