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

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/

我个人不会为此使用文本框。如果您不关心可访问性，您可以制作一个弹出式文本框，当用户单击文本时出现，然后消失。