10

解析用の大規模な SQL スクリプトを保持するために使用されるテキストエリアがあります。ユーザーが [解析] ボタンをクリックすると、SQL スクリプトに関する概要情報が表示されます。

概要情報をクリックできるようにして、クリックすると SQL スクリプトの行がテキストエリアで強調表示されるようにしたいと思います。

私はすでに出力に行番号を持っているので、必要なのは、テキストエリアのどの行を強調表示するかを伝えるjavascriptまたはjqueryだけです。

「 goToLine」関数のタイプはありますか? 私のすべての検索において、私が探しているものに完全に対応するものは何もありません。

4

5 に答える 5

26

この関数は、最初のパラメーターがテキストエリアへの参照であり、2 番目のパラメーターが行番号であることを想定しています。

function selectTextareaLine(tarea,lineNum) {
    lineNum--; // array starts at 0
    var lines = tarea.value.split("\n");

    // calculate start/end
    var startPos = 0, endPos = tarea.value.length;
    for(var x = 0; x < lines.length; x++) {
        if(x == lineNum) {
            break;
        }
        startPos += (lines[x].length+1);

    }

    var endPos = lines[lineNum].length+startPos;

    // do selection
    // Chrome / Firefox

    if(typeof(tarea.selectionStart) != "undefined") {
        tarea.focus();
        tarea.selectionStart = startPos;
        tarea.selectionEnd = endPos;
        return true;
    }

    // IE
    if (document.selection && document.selection.createRange) {
        tarea.focus();
        tarea.select();
        var range = document.selection.createRange();
        range.collapse(true);
        range.moveEnd("character", endPos);
        range.moveStart("character", startPos);
        range.select();
        return true;
    }

    return false;
}

使用法：

 var tarea = document.getElementById('myTextarea');
 selectTextareaLine(tarea,3); // selects line 3

作業例:

http://jsfiddle.net/5enfp/

于 2012-11-30T18:33:06.377 に答える
3

darkheir による投稿のコードが正しく動作しません。それに基づいて、コードを短くして機能させました。



    function onClickSelection(textarea){
        if(typeof textarea.selectionStart=='undefined'){
            return false;
        }
        var startPos=(textarea.value.substring(0,textarea.selectionStart).lastIndexOf("\n")>=0)?textarea.value.substring(0,textarea.selectionStart).lastIndexOf("\n"):0;
        var endPos=(textarea.value.substring(textarea.selectionEnd,textarea.value.length).indexOf("\n")>=0)?textarea.selectionEnd+textarea.value.substring(textarea.selectionEnd,textarea.value.length).indexOf("\n"):textarea.value.length;
        textarea.selectionStart=startPos;
        textarea.selectionEnd=endPos;
        return true; 
    }
于 2014-06-14T19:27:24.123 に答える