1

テキスト領域の各行をクリック可能にしようとしています。カーソルをデフォルトにすることも、ポインタを使用することもできません。jsfiddle

<textarea rows="10" cols="45">
hello
world
</textarea>​

各行のテキストをクリックしてajax呼び出しを行いたい。私はすべてのajax機能を書くことができます。私が理解しようとしているのは、テキストの各行をクリックすることだけです。テキストエリアで可能ですか、それとも他の方法がありますか。

編集

より正確には<c:forEach items="${}" var=""> <c:out value="${} /></c:forEach>、テキスト領域内で使用しています。段落タグ付きのテキストとは異なります。このページの前に選択された入力に基づいて、テキストは動的になります

4

4 に答える 4

3

これを行うには、selectionStartを使用することをお勧めします。

これが例です。用途に合わせて自由にカスタマイズしてください。しかし、これで始められるはずです。

<textarea rows="10" cols="45" onkeyup="getLineNumber(this, document.getElementById('lineNo'));" onmouseup="this.onkeyup();"></textarea>
<div id="lineNo"></div>

<script>

    function getLineNumber(textarea, indicator) {

        indicator.innerHTML = textarea.value.substr(0, textarea.selectionStart).split("\n").length;
    }

</script>
于 2012-11-26T23:01:13.980 に答える
2

私があなたを正しく理解していれば、あなたはあなたがクリックした行のテキストを取得したいと思うでしょう。その場合、次の例で機能します。

$("#mytextArea").on("mouseup", function(eventData) {
    var lineHeight = $(this).css("line-height");
    lineHeight = parseInt(lineHeight.substring(0, lineHeight.length - 2));

    var line = Math.floor(eventData.offsetY / lineHeight);
    alert($(this).val().split("\n")[line]);
});

デモ-textareaのクリックされた行からテキストを取得

コードは、テキストエリア内でマウスがクリックされた位置を取り、offsetY適用されたで除算しline-heightます。これを使用Math.floor()すると、クリックされた行が取得され、行を。で分割するときに配列のインデックス要素として使用され"\n"ます。

この作業を行うことに加えて、pxクリックされた行を計算できるように、行の高さを設定値に強制しました。

textarea{
    font-size: 15px;
    line-height: 15px;
}​

編集-textareaのスクロールバー

textareaにスクロールバーがあるとすると、スクロールバーはoffsetY値を「歪め」、現在のスクロール位置を次のように追加する必要があります。

$("#mytextArea").on("mouseup", function(eventData) {
    var scrollPosition = $(this).scrollTop()
    var lineHeight = $(this).css("line-height");
    lineHeight = parseInt(lineHeight.substring(0, lineHeight.length - 2));

    var line = Math.floor((eventData.offsetY + scrollPosition) / lineHeight);
    alert($(this).val().split("\n")[line]);
});​

デモ-スクロールバーを使用してテキストエリアのクリックされた行からテキストを取得

CSSを固定の高さに更新して、次のようなスクロールバーを取得しました。

textarea{
    font-size: 15px;
    line-height: 15px;
    height: 100px;    
}
于 2012-11-26T23:19:12.687 に答える
0

でカーソル位置を取得し、textareaどのテキストが含まれているかを把握してから、ajaxを実行できます。そうは言っても、要素（、、）を分離して、それぞれのクリック関数で必要なajax呼び出しを実行する方が簡単preです。ainput

于 2012-11-26T23:00:54.183 に答える
0

各行をapタグ内に配置し、onclickを使用して次のようにすることができます。

<p onclick="myFunction()">Hello</p>
<p onclick="myOtherFunction()">World</p>
于 2012-11-26T23:03:58.790 に答える