28

テキスト ボックスとボタンを含むフォームがあります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
</head>
<body>

<p><textarea rows="4" cols="30">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</textarea></p>
<p><input type="button" value="Click me"></p>

</body>
</html>

ユーザーはテキストを選択してから、ボタンをクリックします。テキストエリアがフォーカスを失うと、選択範囲が表示されなくなります。

選択範囲を表示したままにする方法はありますか? 使用可能である必要はありません (つまり、入力によって選択範囲が削除されたりCtrl+Cコピーされたりする必要はありません) が、テキストエリアに選択範囲が含まれているという視覚的なフィードバックが期待できます。

モックアップ

デモ:フィドル

4

8 に答える 8

4

jsFiddle を調べたところ、CodeMirrorには、高度にカスタマイズされたテキストエリアを作成するために必要なものがすべて揃っていることがわかりました。これはコードを書くために作成されましたが、ちょっとしたコツを使えば、テキストエリア全般に適用できます。

デモを見る

まず、テキストエリアを用意します:

<textarea id="a">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</textarea>

その後、次のスクリプトを配置して CodeMirror テキストエリアを作成し、それを通常のテキストエリアに変換するための追加設定を提供します。

  • mode:"none"ここでは、構文の強調表示を削除します。
  • lineWrapping:true長い行を折り返すために使用します。
var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("a"), {
    mode: "none",
    lineWrapping: true
});

最後に、CSS を使用してサイズを制御し、標準のテキストエリアのように見せます。

.CodeMirror {
    font-family: monospace;
    font-size: 12px;
    width: 300px;
    height: 100px;
    border: solid 1px #000;
}
于 2013-03-21T13:10:01.173 に答える
4 
<textarea onblur="this.focus()">this is a test</textarea>
<p><input type="button" value="Click me"></p>

これは IE/Chrome で期待どおりに機能します。しかし、FFではそうではありません。

したがって、一般的な解決策は次のとおりです。

<textarea onblur="doBlur(this)">this is a test</textarea>
<p><input type="button" value="Click me"></p>

<script>
function doBlur(obj) {
  setTimeout(function() { obj.focus(); }, 10);
}
</script>
于 2013-03-20T13:30:44.753 に答える
3

これが技術的にあなたが望んでいたものではないことはわかっていますが、とにかくごまかすつもりです.

Javascript:

var textarea = document.getElementById('textarea');
var div = document.getElementById('holder');

var original_value = textarea.value;
textarea.onblur = function () {
    var start = textarea.selectionStart;
    var end = textarea.selectionEnd;
    textarea.style.display = "none";
    div.innerHTML = textarea.value.splice(end, 0, "</span>").splice(start, 0, "<span>");
    div.style.display = "block";
}

div.onclick = function () {
    div.style.display = "none";
    textarea.style.display = "block";
    textarea.value = original_value;
}

String.prototype.splice = function( idx, rem, s ) {
    return (this.slice(0,idx) + s + this.slice(idx + Math.abs(rem)));
};

HTML:

<p><textarea id="textarea" rows="4" cols="30">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</textarea></p>
<div id="holder"></div>
<p><input id="click" type="button" value="Click me"></p>

CSS:

textarea, #holder{
    height: 120px;
    width: 300px;
    border: 1px solid black;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 3px;
    font-size: 10pt;
    font-family: Arial;
}
#holder{    
    display: none;
}
#holder span{
    background-color: #b4d5ff;
}

デモ: http://jsfiddle.net/Mb89X/4/

于 2013-03-20T13:17:52.033 に答える
3

ボタンがクリックされたときにフレーム内の選択を表示する でラップすることができtextareaます。iframe

このフィドルは、srcdocChrome と Safari 6 でのみサポートされている属性を使用iframeします。ただし、その属性がなくても を使用できます。

編集:これは、 jquery を使用して を追加する、さらにハッカー的な新しいフィドルです。iframeiframe

于 2013-03-20T12:52:26.287 に答える
2

あなたがやろうとしていることは、テキストエリアでは不可能です。

divテキストエリアを使用する代わりに、 withcontenteditable="true"とrangyを使用することをお勧めします。次に、選択したテキストを折り返すか、フォーカスのあるテキストを選択し、イベントをぼかします。

この範囲のデモは、テキストを選択する方法を示しています: http://rangy.googlecode.com/svn/trunk/demos/highlighter.html

于 2013-03-20T13:16:37.793 に答える
1

:focusボタンの が問題にならない場合は、使用できます

$('input[type=button]').click(function () {
    $('textarea').focus();
});

これがフィドルです。

于 2013-03-20T13:12:48.557 に答える
0

これを試して：

var element = document.getElementById('text')
if(element.setSelectionRange)
{
    element.focus();
    element.setSelectionRange(2, 10);    
}
else if(element.createTextRange)
{

    var selRange = element.createTextRange();
          selRange.collapse(true);
          selRange.moveStart('character', 2);
          selRange.moveEnd('character', 10);
          selRange.select();
          field.focus();
} else if( typeof element.selectionStart != 'undefined' ) {
      element.selectionStart = 2;
      element.selectionEnd = 10;
      element.focus();
}

http://jsfiddle.net/inser/YJzvb/2/

于 2013-03-20T12:48:44.730 に答える