0

コード: http://jsfiddle.net/MuHvy/

Javascript:

    $(document).ready(function () {
    $(".addTag").click(function () {
        $('.questao').html($('.questao').html() + '&nbsp;<span contentEditable="false" class="tagResp">&nbsp;</span>&nbsp;');
        $('.questao').focus();
    });
    });

スパン CSS:

border:2px solid #dadada;
border-color:#9ecaed;
border-radius:7px;
display: inline-block;
height: 10px;
width: 50px;
padding:5px;
margin-top:3px; 
box-shadow:0 0 10px #9ecaed;
white-space:nowrap;

この例では、ユーザーがボタンをクリックしたときに現在の行にタグを作成する必要があります。

問題: 2 行目以降、jquery が作成したタグが何らかの理由で同じ行にとどまらず、新しい行にジャンプします。

例：

~間違い~

 randomtext randomtext <span>tag</span> <br>
 randomtext <br>
 <span>tag</span>

次のようにする必要があります。

 randomtext randomtext <span>tag</span> <br>
 randomtext <span>tag</span>

他の質問は次のとおりです。

最後の行にフォーカスすることは可能ですか? jquery 関数 .focus() はテキストの先頭に移動し、最後にする必要があります。

ありがとう！誰かが私を助けてくれることを願っています。

4

4 に答える 4

3

contentEditableHTML5での実装に問題があるようです

このリンクhttp://jsfiddle.net/MuHvy/10/を見ると、テストボタンをクリックすると、期待どおりにレポートされ、ボックスに小さなテキストを追加してから、テストボタンをもう一度クリックできます。ボックスがフォーカスを失った場合、ブラウザーは余分な<br>タグを追加します。

フォーカス ロストの実装についてhttp://www.w3.org/TR/2008/WD-html5-20080610/editing.htmlを見つけることができる詳細はありません

ただし、次の要素を追加する前に<br>末尾をトリミングする関数を作成することで、post fixed タグを先取りすることができますが、これはブラウザーによって異なる場合があります。<br>

于 2013-06-06T13:54:41.497 に答える
1

Jason P があなたの HTML を見ているように、私もそれを見ていました。これがあなたの望むものであることを願っています。display : inlinecss にa をフィールドdiv内に追加しました。contentEditableそのため、押しenterてdiv要素が作成された後でも、要素はインラインになります。

更新されたフィドル: http://jsfiddle.net/MuHvy/4/ (chrome 23 および IE10 でテスト済み)

FF と safari についても同様に、 を に置き換えてから<br>、クリックが発生''したときに を追加することができます。span

IE9の場合：divそれ自体が奇妙に見えるので、無視しましょう。

フォーカスの問題については、次の質問を参照してください: jquery Setting cursor position in contenteditable div。これはまさにあなたが必要とするものです。お役に立てれば！

于 2013-06-06T13:47:18.937 に答える
0

それを修正するには、後処理を行う必要があります。HTML は空白の影響を受けないため、HTML ドキュメント (および HTML ドキュメントへの jQuery 書き込み) の観点から、次のようになります。

randomtext randomtext <span>tag</span>
randomtext
<span>tag</span>

この：

randomtext randomtext <span>tag</span>
randomtext <span>tag</span>

機能的に同一です。空白に非常に敏感な場合は、html() の代わりに text() を使用し、div または使用しているものの代わりに textarea に書き込むことを検討することをお勧めします。

あなたの最後の質問については、あなたが求める答えはここにあります: jQuery Set Cursor Position in Text Area

編集：

@Gorflが改行が実際には改行であることを追加した後、さらにチェックを行いました。問題は contentEditable がブラウザによって処理されている方法によるものと思われます。Firefox では、<br>Enter キーを押したかどうかに関係なく、すべての行が - で終了します。クロムでは、各行が div でラップされます。信頼性の高いクロスブラウザー ソリューションが必要な場合は、contentEditable を使用しない必要があると思います。代わりに、keydown または keypress イベントのリスナーをアタッチし、押されたキーを div 本体にコピーします。そうすれば、表示方法を完全に制御できます。

于 2013-06-06T13:28:57.467 に答える
0

を使用してブレークラインの問題を修正できました

   $('br[type="_moz"]').remove();

何らかの理由で、div は毎回最後に _moz 型の br を作成します。

Jクエリ:

 $(document).ready(function () {
    $(".addTag").click(function () {
        $('br[type="_moz"]').remove();
        $('.questao').html($('.questao').html() + '&nbsp;<span contentEditable="false" class="tagResp">&nbsp;</span>&nbsp;');
        $('.questao').focus();
    });
});
于 2013-06-06T14:18:36.463 に答える