1

各エントリに数行のテキストが含まれるjQueryモバイルのリストビューがあります。

エントリをクリックすると、テキストの一部が <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 に答える