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">

這將生成一個水印，當你專注於它時它會消失