尝试使用Jquery设置字段 - 不起作用

时间:2016-03-09 14:21:37

标签: jquery

我似乎无法让这个工作。我正在使用JQuery,并且对此有点新鲜。 警报信息是--->之前......功能(一){返回J ...... 并且脚本不起作用。

<!DOCTYPE html>
<html>    
<head>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function() 
        {                
            $("input").click(function()
            {

                alert('before...' + $(this).text);

                if ($(this).text == "Search  ")
                {
                   $(this).val("You have set me to value.");   
                   $(this).css({"style.color":"#000000"});
                   $(this).css({"fontStyle":"italic"});  
                }
                else
                {
                   $(this).val("");                      
                }

                alert('after...' + $(this).text);                    

           });          
        });

    </script>

    <title>My page</title>

</head>

<body>
   <div class="historysearch">
      <input id="textinput" type="text" value="Search  "/>                              
   </div> 
</body>

1 个答案:

答案 0 :(得分:0)

使用val()方法获取输入值.text

工作演示

&#13;
&#13;
$(document).ready(function() {
  $("input").click(function() {

    alert('before...' + $(this).val());

    if ($(this).val() == "Search") {
      $(this).val("You have set me to value.");
      $(this).css({
        "style.color": "#000000"
      });
      $(this).css({
        "fontStyle": "italic"
      });
    } else {
      $(this).val("");
    }

    alert('after...' + $(this).val());

  });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="historysearch">
  <input id="textinput" type="text" value="Search  " />
</div>
&#13;
&#13;
&#13;