Question

这是来自BootStrap 3的网站：

User input
Use the <kbd> to indicate input that is typically entered via keyboard.

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

如何将它们合并到占位符（输入字段中的背景文本）？

$j('#text_input').attr('placeholder','Enter options and hit <kbd>Enter</kbd> key');

上述代码不会更改文本样式。它把它视为字面上＆lt; KBD＆GT;输入＆LT; / KBD＆GT;

Answer 1

以下是使用HTML标记而不是使用placeholder属性的示例。但这似乎比它的价值更多。

将元素放在输入顶部
隐藏并显示焦点上的元素\ blur
如果单击占位符，请确保将焦点设置在输入上。

jsFiddle Demo

HTML

<div class="input-wrap">
    <input class="form-control" type="text" />
    <span class="placeholder">Enter options and hit <kbd>Enter</kbd> key</span>
</div>

CSS

.input-wrap { position: relative; }
.placeholder {
    position: absolute;
    top: 7px;
    left: 6px;    
}

的jQuery

$('.placeholder').click(function(){
   $(this).prev().focus(); 
});

$('.form-control').focus(function() {
   $(this).next().hide();
});

$('.form-control').blur(function() {
   if($(this).val() == "")
      $(this).next().show();
});

在占位符中添加用户输入

1 个答案: