Fatal编程技术网
  • javascript/
  • Javascript 调用函数时的Jquery问题

Javascript 调用函数时的Jquery问题

javascript jquery html forms

Javascript 调用函数时的Jquery问题,javascript,jquery,html,forms,Javascript,Jquery,Html,Forms,所以我试着做一个函数，在一个字段中设置/删除水印，我已经成功了，输入的html元素如下所示： <input type="text" name="pollName" id="pollName" value="DD-MM-YYYY" onfocus="javascript: watermark(this,true,'DD-MM-YYYY')" onblur="javascript: watermark(this,false,'DD-MM-YYYY')" > <input type

所以我试着做一个函数，在一个字段中设置/删除水印，我已经成功了，输入的html元素如下所示：

<input type="text" name="pollName" id="pollName" value="DD-MM-YYYY" onfocus="javascript: watermark(this,true,'DD-MM-YYYY')" onblur="javascript: watermark(this,false,'DD-MM-YYYY')" >

<input type="text" name="pollName" id="pollName" placeholder="DD-MM-YYYY">
这里是有问题的HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>SPS: Create a new poll</title>
<link href="styles/stylePollCreator.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jsPollCretor.js"></script>


</head>

<body>

        <div id="pollSetup">
            <form action="" method="post">
                <label for="pollName:">Poll name</label>
                <input type="text" name="pollName" id="pollName" />
                <br />
                <label for="startDate">Start date: </label>
                <br />
                <input type="text" id="startDate" name="startDate" class="dateSelector" value="DD-MM-YYYY"/>
                <label for="endDate">End date: </label>
                <input type="text" id="endDate" name="endDate" class="dateSelector" value="DD-MM-YYYY"/>
                <br />
                <div id="pollOptions">
                </div>
                <input id="submitNewPoll" value="Create poll" type="submit" />
            </form>
            <button id="addOption">Add option</button>
        </div>
    </body>
</html>


SPS：创建新的轮询
投票名称


开始日期：


结束日期：


添加选项
addOption函数工作正常，但是水印函数在站点首次加载时似乎只调用一次，然后就不再调用了：/

感谢您的时间：）

focusin
和
focusout
期望参数的函数，从技术上讲，您传递的是
未定义的
，因为水印不会返回任何内容。换句话说，您传递的是
水印
的结果，而不是
水印
本身

所以，您想这样做：

$('.dateSelector').focusin(function(){watermark(this,1,'DD-MM-YYYY')});
编辑：

我同意上面的评论，你应该使用占位符属性。因此，您的输入如下所示：

<input type="text" name="pollName" id="pollName" value="DD-MM-YYYY" onfocus="javascript: watermark(this,true,'DD-MM-YYYY')" onblur="javascript: watermark(this,false,'DD-MM-YYYY')" >

<input type="text" name="pollName" id="pollName" placeholder="DD-MM-YYYY">
请记住，这是HTML5的一个属性，因此对于旧浏览器，您必须使用多边形填充，但如果使用，您将发现可以使用的多边形填充有一百万个

但是，当站点首次加载时，水印函数似乎只调用一次

是的，这就是你要做的

$('.dateSelector').focusin(watermark(this,1,'DD-MM-YYYY'));
$('.dateSelector').focusout(watermark(this,0,'DD-MM-YYYY'));
这相当于

watermark(this,1,'DD-MM-YYYY');
$('.dateSelector').focusin(undefined);
watermark(this,0,'DD-MM-YYYY');
$('.dateSelector').focusout(undefined);
将函数传递给事件注册：

$('.dateSelector').focusin(function(e) {
    watermark(this,1,'DD-MM-YYYY');
}).focusout(function(e) {
    watermark(this,0,'DD-MM-YYYY');
});
但是，正如@MattBall已经评论的那样，如果需要支持较旧的浏览器，您应该只使用
占位符
属性并对其进行填充（使用现有库）：

<input type="text" name="pollName" id="pollName" placeholder="DD-MM-YYYY">
不要在eventhandler属性中使用
javascript:
-URL，而要使用普通代码。你到底为什么不使用（如果你想支持较旧的浏览器，还可以使用HTML5 polyfill）？！当jQuery可用时，不要使用eventhandler属性。感谢您和mattball。我还没怎么看过HTML5，所以我不知道占位符是一个东西：P