Question

作为我自己的练习，我正在尝试使用JavasScript，JQuery和PHP制作博客发布应用程序。我想要发生的是，当你打字时，页面的标题会发生变化。有了这个，我的意思是在<title></title>标签内声明的标题。 StackOverflow就是一个很好的例子：当你提出一个新问题时，你输入那个帖子的标题，页面标题（在<head>内声明的那个）会改变你输入的标题。

这种效果是如何完成的？是否可以只使用JavaScript / JQuery或者你需要AJAX吗？

Answer 1

你可以用JS改变标题：

document.title = 'New title';

关于你正在寻找的效果你可以做以下几点：

$(document).ready(function() {
     $("input").keyup(function() {
          var text = $(this).val();
          document.title = text;
     });
});

Answer 2

我不确定，但我认为您要将页面title更改为input标记中输入的内容，例如

这样的事情？

$(document).ready(function () {
    $('#myInput').keyup(function () {
        $(document).attr('title', $('#myInput').val());
    });
});

以上将跟踪键盘的变化（在键盘上）并获取文本输入的值并将其设置为页面标题：

这是一个工作小提琴：http://jsfiddle.net/ZLPfM/show

Answer 3

要更改页面标题，您可以执行以下两项操作之一：

//plain javascript
document.title = 'My JavaScript title!';

//jQuery
$(document).attr('title', 'My jQuery Title');

要在键入时更改它，请挂钩keyup事件：

$(document).keyup(function(e) 
{ 
    //Check the keycode using e.keyCode
});

这会将其绑定到document，这意味着只要按下某个键，在输入中或其他情况下，您的事件就会触发。您还可以将其绑定到文本框，这样只有在输入内输入时才会触发（这可能是您想要做的）。

如果您绑定到document，如上所示，您必须检查keyCode并将值附加到您的标题上。如果绑定到输入，则可以获取输入值并将标题设置为新值：

$('#myinput').keyup(function(e)
{
    var text = $(this).val();
    document.title = text;
});

键入时更改页面标题

3 个答案: