web-dev-qa-db-ja.com

jQuery gettextareaテキスト

最近、私はjQueryで遊び始め、いくつかのチュートリアルに従っています。今、私はそれを使用するのに少し有能だと感じています（かなり簡単です）、そして私のウェブページで「コンソール」を作ることができたらいいと思いました（例えば、あなたがするように `キーを押します FPS gamesなど）、その後、Ajax自体がサーバーに戻って処理を行います。

私はもともと、テキストエリア内にテキストを取得し、それを分割するか、またはキーアップイベントを使用し、返されたキーコードをASCII文字に変換し、文字を文字列を送信し、サーバーに文字列を送信します（文字列を空にします）。

テキストエリアからテキストを取得するための情報が見つかりませんでした。キーアップ情報しかありませんでした。また、返されるキーコードをASCII文字に変換するにはどうすればよいですか？

javascriptjqueryajax
465
RodgerB

キーストロークをテキストに変換したいのはなぜですか。クリックしたときにテキストエリア内のテキストをサーバーに送信するボタンを追加します。前に指摘した投稿者としてvalue属性を使用するか、jQueryのAPIを使用してテキストを取得できます。

$('input#mybutton').click(function() {
    var text = $('textarea#mytextarea').val();
    //send to server and process response
});
673
Eran Galperin

それがあなたが使うテキスト関数であることが多いところでは（例えばdivsなどで）、テキスト領域のためにそれはvalです。

取得する：

$('#myTextBox').val();

セット：

$('#myTextBox').val('new value');
32
Thomas Koelle

コンソールメッセージ、つまり以前のコマンドとその出力だけを含むdivが必要です。そしてその下には、入力しているコマンドだけを保持する入力領域またはテキスト領域を配置します。

-------------------------------
| consle output ...           |
| more output                 |
| prevous commands and data   |
-------------------------------
> This is an input box.

こうすることで、入力ボックスの値を処理のためにサーバーに送信し、その結果をコンソールメッセージdivに追加するだけです。

23
p3drosola

通常、それはvalueプロパティです

testArea.value

それとも私があなたが必要とするものに欠けている何かがありますか？

13
sblundy

次の関数を使うことでイベントのkeyCodeを文字に変換できることを私は考え出しました：

var char = String.fromCharCode(v_code);

そこから私は文字列に文字を追加し、エンターキーが押されたらサーバーに文字列を送ります。私の質問がやや不可解に見え、タイトルがほぼ完全に話題から外れていることを意味するのであれば申し訳ありません。

ご協力ありがとうございました。

8
RodgerB

「コンソール」という言葉が、混乱を招いているように思われます。

古いスタイルの全二重/半二重コンソールをエミュレートしたい場合は、次のようにします。

$('console').keyup(function(event){
    $.get("url", { keyCode: event.which }, ... );
    return true;
});

押されたキーを持つevent.which。バックスペース処理に関しては、event.which === 8です。

7
eric

Textareaの値とcode-charの変換を読む：

function keys(e) {
  msg.innerHTML = `last key: ${String.fromCharCode(e.keyCode)}`
  
  if(e.key == 'Enter') {
    console.log('send: ', mycon.value);
    mycon.value='';
    e.preventDefault();
  }
}
Push enter to 'send'<br>
<textarea id='mycon' onkeydown="keys(event)"></textarea>

<div id="msg"></div>

そして、以下のNice Quakeのような div-sのみのconsole :)

document.addEventListener('keyup', keys);

let conShow = false

function keys(e) {
  if (e.code == 'Backquote') {
    conShow = !conShow;
    mycon.classList.toggle("showcon");
  } else {
    if (conShow) {
      if (e.code == "Enter") {
        conTextOld.innerHTML+= '<br>' + conText.innerHTML;
        let command=conText.innerHTML.replace(/&nbsp;/g,' ');
        conText.innerHTML='';
        console.log('Send to server:', command); 
      } 
      else if (e.code == "Backspace") {
        conText.innerHTML = conText.innerText.slice(0, -1);
      } else if (e.code == "Space") {
        conText.innerHTML = conText.innerText + '&nbsp;'
      } else {
        conText.innerHTML = conText.innerText + e.key;
      }

    }
  }
}
body {
  margin: 0
}

.con {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  height: 90px;
  background: rgba(255, 0, 0, 0.4);
  position: fixed;
  top: -90px;
  transition: top 0.5s ease-out 0.2s;
  font-family: monospace;
}

.showcon {
  top: 0px;
}

.conTextOld {
  color: white;
}

.line {
  display: flex;
  flex-direction: row;
}

.conText{   color: yellow; }

.carret {
  height: 20px;
  width: 10px;
  background: red;
  margin-left: 1px;
}

.start { color: red; margin-right: 2px}
Click here and Press tilde ` (and Enter for "send")

<div id="mycon" class="con">
  <div id='conTextOld' class='conTextOld'>Hello!</div>
  <div class="line">
    <div class='start'> > </div>
    <div id='conText' class="conText"></div>
    <div class='carret'></div>
  </div>
</div>
0
Kamil Kiełczewski

最善の方法：$（ '＃myTextBox'）。val（ 'new value'）。trim（）;

0
Abolfazl Miadian