选项卡到文本输入的开头

Question

我有一个登录表单：

<form>
    <div class="username">
        <label for="username">Email</label><br />
        <input type="text" class="field" value="Enter your email" name="email" id="id_email">
    </div>
    <div class="password">
        <label for="password">Password</label><br />
        <input type="password" class="field" name="password" id="id_password">
    </div>
</form>

我想这样做，当用户从一个字段切换到另一个字段时，它会在字段的开头设置选择，而不是突出显示整个字段的文本。可以在登录表单上看到一个示例：https://squareup.com/。

我有一个函数将光标设置在文本输入的开头setCursorAtBeginning，我将如何使用js或jQuery完成上述操作（最好，如果可以在其中完成）？

Answer 1

您想使用placeholder。如果您的浏览器支持@placeholder，您可以使用它，或者您可以使用polyfill。

@placeholder

<form>
  <div class="username">
    <label for="username">Email</label><br />
    <input type="text" class="field" placeholder="Enter your email" name="email" id="id_email">
  </div>
  <div class="password">
    <label for="password">Password</label><br />
    <input type="password" class="field" name="password" id="id_password" placeholder="Enter your password">
  </div>
</form>​

Check it out

填充工具

如果您想在旧版浏览器中使用它，可以使用HTML5 Placeholder jQuery Plugin

Answer 2

使用占位符。最好的方法是将它与一些js一起使用以实现跨浏览器兼容性。喜欢这个插件http://mal.co.nz/code/jquery-placeholder/