Question

我正在尝试模仿twitter bootstrap的文本输入行为。我注意到在Twitter Bootstrap的输入中，当用户点击时，光标始终保持在文本输入的开头。但是“搜索”文本在用户开始输入之前不会消失。

我的大部分工作除了我之外光标不会停留在文本输入的开头。我有什么想法可以实现这个目标吗？

到目前为止，这是我的jQuery代码：

$('input[title]').each(function() {
    if($(this).val() === '') {
        $(this).val($(this).attr('title'));
    }
    $(this).keydown(function() {
        if($(this).val() == $(this).attr('title')) {
            $(this).val('').removeClass('blur');
        }
    });
    $(this).mousedown(function() {
        if($(this).val() == $(this).attr('title')) {
            $(this).blur().val('');
            $(this).focus().val($(this).attr('title'));
        }
    });
    $(this).blur(function() {
        if($(this).val() === '') {
            $(this).val($(this).attr('title')).addClass('blur');
        }
    });
});

Answer 1

您所描述的内容可能是一个名为占位符的属性：

<input type="text" placeholder="Type something…">

Answer 2

使用此功能将焦点添加到输入

$("#inputid").focus ();

Answer 3

这肯定会对您有所帮助：http://jsbin.com/ohoyer/2/edit

jQuery(function ($) {
       var $inputExample = $('#input-ex');
       var a = false;
       $inputExample.click(function () {
         $inputExample.caretToStart();
       });

       $inputExample.keypress(function(){
       if(a == false){
         $(this).val('');
         a = true
       }else{
         $inputExample.caretToEnd();
       }
    });
});

这是用于此的插件：

`https://gist.github.com/DrPheltRight/1007907/raw/
  b1ce3b710616f9ee15a6b8ca2b03e35756d3d816/jquery.caret.js`

jQuery将光标保持在文本输入的开头，直到用户开始输入

3 个答案: