链接顶部的输入字段

Question

我四处寻找答案，但过了一会儿没找到任何东西。我正在运行jQuery移动，并有一个列表视图与一堆我想要的链接和输入字段。但是当我点击输入文本框时，它也会自动按下按钮。

基本上，我想做的是有一个用户可以修改的输入表单，然后让他们点击表单外的任何地方来提交更改。

有办法绕过这个吗?

echo "<li data-icon='false'>![enter image description here][1]
    <a href='javascript: updateName()'> Name of Conversation: 
        <form name='name' action='update.php' method='post'>
            <input type='text' name='name' id='name' value='" . $this->conversation->get_name() . "'/>
        </form>
    </a>
</li>";

如果有人想知道updateName()做什么:

function updateName(){
    document.name.submit();
}

Answer 1

您已经将input包装在<a>标记中。点击<input>，点击事件向上冒泡到<a>，触发updateName

您可以为input的click事件绑定一个处理程序，并调用event.stopPropagation()来防止该事件冒泡到父<a>，如下所示:

document.getElementById('name').addEventListener('click',function(e){
 e.stopPropagation();
});
function updateName(){
 document.name.submit();
}

Answer 2

您应该将侦听器附加到字段的blur事件，该事件将在字段失去焦点时触发。在做任何事情之前，请检查用户是否在字段中输入了一些内容，否则在错误的时刻点击或标签会很快变得令人不安。

对于它周围的链接，我不明白你为什么要这样做。如果你真的需要一个链接，把它放在你的字段旁边，而不是周围。