Cursor 出现在搜索框点击

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>

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

这将存储输入的原始值并在第一次输入时使输入为空白，如果在移除焦点时该字段为空白，它将恢复原始值，如果用户在输入中输入一个值，则不会发生任何事情他们离开的时候。 如果他们稍后重新访问输入并将其设为空白，则将再次插入原始值。

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');
    }
});

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

$('#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';" />

同样，如果值为“此处的文本”，这只会在单击时删除文本，如果用户将框留空，它将重新添加“此处的文本”。 但是您可以调整 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>

Answer 6

您可以将placeholder=""添加到您的输入标签中

<input type="text" placeholder="Keyword or code">

这将生成一个水印，当你专注于它时它会消失