1

我在 jQuery mobile 中有一个列表视图，其中每个条目都包含几行文本。

单击该条目应该将文本的某些部分替换为 <textarea> 以使其可编辑。再次单击该条目应再次将 textarea 替换为纯文本（现已编辑）。

在编辑文本时，用户应该能够在文本框中单击以选择部分文本或移动光标。为了防止来自 textarea 的点击事件冒泡，我stopPropagation()在事件上使用，效果很好。

然而，虽然这在 Chrome 和 Safari 中有效，但 Firefox 和 Internet Explorer 都不会移动光标，也不会让用户选择文本区域内的部分文本。

我在这里缺少什么吗？（对于 Firefox，我在 Windows 7 上使用版本 19.0.2，如果相关的话。我尝试使用 preventDefault 或返回 false，但这不起作用 - 为什么要这样做？）

我在这里创建了一个 JSFiddle

html代码是

<ul id="listid" data-role="listview" data-filter="true" data-iconpos="center" data-split-icon="arrow-u" data-theme="c" data-split-theme="b" data-inset="true">
<li><a href="#" id="link1">
  <h2>Title</h2>
  <p>Here is some item<br />with several lines<br />
    <span id="comment1">And this line is supposed to be editable</span>
    <textarea style='display: none; width: 95%;' id="textarea1"></textarea>
   </p></a>
  <a href="#" onclick="alert('Something else happens here')">This does something else</a>
</li>
</ul>

并且相应的 JavaScript 是（在这里加载在 body.onLoad 上，但这仅适用于 JsFiddle）：

window.toggled = false;

$("#link1").click( function(e){
    var textarea = $("#textarea1").toggle();
    var comment =  $("#comment1").toggle();
    if(window.toggled){
        comment.html(textarea.val());
    }
    else{
       textarea.val(comment.html());
    }
    toggled = !toggled;
});

$("#textarea1").click(function(e){
    if(console && console.log){ console.log(e);}
    e.stopPropagation();
});

请忽略切换文本区域的不太优雅的解决方案。

4

1 回答 1

0

IE 对锚标记内的文本区域不满意。见http://jsfiddle.net/zCfRu/

<a href="#" id="link1"> 
<h2>Title</h2>
<p>Here is some item<br />with several lines<br />
<span id="comment1">And this line is supposed to be editable</span>
</p>
</a>
<textarea style='display: none; width: 95%;' id="textarea1"></textarea>
于 2013-03-19T09:49:10.570 回答