Question

我有一个具有以下值的文本框：

The person 'enter name here' has finished.

我希望用户点击''文本enter name here之间的每个位置。怎么做？

<input type="text" id="txt"/>

编辑：我可能在文本框中有两个或更多位置。像这样：

The person 'enter name here','enter family here' has finished.

Answer 1

如果我正确理解了这个问题，我会像这样使用jquery

<div>
    The Person <input type="text" value="'Enter Name Here'" /> has finished
</div>

<script type="text/javascript">
    $('input').focus(function() {
        $(this).val(""); 
    });

    $('input').blur(function() {
        if ($(this).val() == "") {
            $(this).val("'Enter Name Here'");   
        }
    });
</script>

http://jsfiddle.net/bExSy/

您可以使用文本

以任何方式设置文本框的样式

Answer 2

你可以伪造一个文本框：

<div class="textbox">
    <div class="before">The person</div>
    <input type="text" id="txt" placeholder="enter name here" size="11" />
    <div class="after">has finished.</div>
</div>

然后（粗略地）将它描绘成一个真实的样式：

.textbox {
    display: inline-block;
    border: 1px solid #AAA;
    margin: 3px;
    padding: 2px;
}

input, div.before, div.after {
    display: inline-block;

    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}

演示：http://jsfiddle.net/3HEQj/

我个人不会为此使用文本框。如果您不关心辅助功能，则可以在用户单击文本时弹出一个弹出文本框，然后随后消失。

使用jquery清除文本框中文本的一部分？

2 个答案: