Question

真的想要一些方向。

希望我的搜索框里面有文字，但点击它时，它会清除它并允许用户开始输入。

这是如何实现的？ jQuery的？

任何人都有任何有用的链接或提示吗？

谢谢：）

更新'jQuery'

<form action="process.php" method="POST">
<input type="text" name="keyword" value="Keyword or code" id="textBox"/>
<?php echo $form->error("keyword"); ?>
<input type="submit" value="Search" name="search" />
</form>

<script type="text/javascript">
$('#textBox').focus(function() { 
  if ($(this).val()==='Keyword or code') {
      $(this).val('');
  }
});
$('#textBox').blur(function() {
  if($(this).val()==='') {
      $(this).val('Keyword or code');
  }
});
</script>

Answer 1

更通用的方法（我们不需要在JS中使用水印文本）：

给定HTML元素<input class="watermark" type="text" value="Text Here" />

以下Javascript：

<script type="text/javascript">

$(document).ready( function () {
    $('input.watermark').focus( function () {
        var $this = $(this);
        if( !$this.data('watermark_value') || $this.data('watermark_value') === $this.val() ) {
            $this.data( 'watermark_value', $this.val() ).val( '' );
        }
    });
    $('input.watermark').blur( function () {
        var $this = $(this);
        if( $this.val() === '' ) {
            $this.val( $this.data('watermark_value') );
        }
    });
});

</script>

然后你可以给任何输入类水印以获得效果。

这将存储输入的原始值并在首次输入时使输入为空白，如果在移除焦点时该字段留空，则将原始值返回，如果用户在输入中输入值，则他们离开时什么都不会发生。如果他们稍后重新访问输入并将其设为空白，则会再次插入原始值。

Answer 2

jQuery不是必需的 - 这是一个简单的简单Javascript解决方案。

您需要绑定到输入onfocus事件并使用onblur恢复默认设置（如果它为空）：

function initSearchBox() {
  var theInput = document.getElementById('idOfYourInputElement');

  // Clear out the input if it holds your default text
  if (theInput.value = "Your default text") {
    theInput.value = "";
  }
}

function blurSearchBox() {
   var theInput = document.getElementById('idOfYourInputElement');

   // Restore default text if it's empty
   if (theInput.value == "") {
       theInput.value = "Your default text";
   }
}

<input type='text' value="Your default text" onfocus="initSearchBox();" onblur="blurSearchBox();" />

实际上，通过这种方法，getElementById()实际上并不是必需的。您可以使用this。

Answer 3

试试这个：

<强> HTML：

<input id="searchBox" value=""/>

<强> JQUERY：

var pre = $('#searchBox').val();
$('#searchBox').focus(function() {
        if($(this).val() != pre)
        $(this).val($(this).val());
        else 
            $(this).val('');
}).blur(function() {
    if ($(this).val() != null && $(this).val() != '') 
            $(this).val($(this).val());
    else 
            $(this).val(pre);
}).keyup(function() {
    if ($(this).val() == null || $(this).val() == '' || $(this).val() == undefined) 
            $(this).val(pre).blur(); // here the input box will lost cursor blink until you click again due to `blur()` function
});

Answer 4

你可以在html5中这样做：

<imput type="search" value="" placeholder="search here">

但IE中的支持有限。

或者，您可以非常轻松地使用jquery：

$(function() {

  $("#search").click(function() {
    $(this).val("");
  });

});

Answer 5

这可以使用以下方法使用jQuery完成;

HTML;

<input id="textBox" name="" type="text" value="text here" />

jQuery;

$('#textBox').focus(function() { 
    if ($(this).val()==='text here') {
        $(this).val('');
    }
});
$('#textBox').blur(function() {
    if($(this).val()==='') {
        $(this).val('text here');
    }
});

这将删除文本框的值，如果它是当前“text here”，那么如果用户点击该框并将其留空，它将重新添加占位符文本。您可以将.focus更改为简单的点击功能，以删除任何内容，无论其中有什么内容。

$('#textBox').click(function() { 
    $(this).val('');
});

或者你可以在HTML中的输入字段中使用一些Javascript，如此;

<input type="text" value="Text here" onfocus="if(this.value=='Text here')this.value='';" onblur="if(this.value=='')this.value='Text here';" />

同样，如果值为“text here”，则只会删除点击文本，如果用户将该框留空，则会在此处添加“Text here”。但您可以调整onfocus以删除任何内容;

<input type="text" value="Text here" onfocus="this.value='';" onblur="if(this.value=='')this.value='Text here';" />

确保您已包含jQuery，将其添加到....

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

光标出现在搜索框中单击

6 个答案: