9

나는 고통스럽게 jQuery에 익숙하지 않고 id를 가진 텍스트 입력 상자의 변경에 대한 가치를 잡아야한다.id[2][t]그 텍스트를div나중에 스타일을 지정할 수도 있습니다 (jQuery 스타일).

이것은 입력 상자 코드입니다.

<input id="id[2][t]" name="id[2][t]" maxlength="20" type="text">

이것은 그것을 표시하려고하는 div입니다.

<div id="textpreview"></div>

이것이 제가 시도한 것입니다. 성공하지 못한 다른 변형들 중에서도 :

$(document).ready(function() {

$('#id\\[2\\]\\[t\\]').change(function() {
  var txtval = $('#id\\[2\\]\\[t\\]').text();
  $("#textpreview").val(txtval);
});

});

괄호가 문제라는 것을 알고 있지만 다른 이유로 남아 있어야합니다.

어떤 아이디어?

6 답변


-1

너는있어.valtext뒤로. 그들을 교환하십시오 :

$('#id\\[2\\]\\[t\\]').change(function() {
  var txtval = $('#id\\[2\\]\\[t\\]').val();
  $("#textpreview").text(txtval);
});

val텍스트 상자의 값을 가져 오는 데 사용됩니다.text텍스트를div.

다음을 사용하여 코드를 더 단순화 할 수 있습니다.this요소를 다시 쿼리하는 대신

$('#id\\[2\\]\\[t\\]').change(function() {
  var txtval = this.value;
  $("#textpreview").text(txtval);
});


  • 이것은 잘 작동하는 것처럼 보입니다. 고맙습니다. 이것은 주제에서 벗어나지 만 id id [3]를 가진 선택 상자의 값을 기반으로 해당 div 클래스를 어떻게 변경합니까? - Rob
  • $(this).val() === this.value기억하십시오 ... jQuery를 사용할 필요가 없습니다.모두 - rlemon

8

$( document.getElementById( "id[2][t]" ) ).change( function(){
  $( "#textpreview" ).text( this.value );
} );


  • JQuery puke 내부의 getById는 DOM에서 ID를 선택하는 데 실제로 30 % 더 빠르게 수행됩니다. (내가 그 퍼프를 아직도 찾을 수 있는지 보자) - rlemon
  • jsperf.com/vanilla-jquery-one/2 - rlemon
  • jQuery를 사용하는 경우 @Rob없이복잡한 선택자 나는 이것을 구현하는 것이 좋습니다 - DOM을 조작 할 때 어떤 성능 향상이 바람직합니다 .. - rlemon

4

ID를 수정하는 것을 고려해 볼 수 있습니다 (자동 생성 될 수도 있음). 에 따르면이 질문귀하의 ID는 사양에 대해 유효하지 않습니다.


  • 맞아 ... 나는 그것들을 수정하고 싶다. 그러나 그것은 단지 선택 사항이 아니다. - Rob
  • @ Rob는 괜찮 았지 만, 길 아래에서 다른 펑키 한 문제가 있으면이 점을 명심하십시오. 마크 업이 유효하지 않으면 브라우저 간 문제에 조금 더 취약합니다. - tomfumb
  • 예, 일반적으로 이런 ID를 만들고 싶지 않습니다. 그것은 이해가되지 않습니다. 이 ID는 테이블을 반영한다고 가정합니다.이 경우 DOM은 자연스럽게 ID를 지정하지 않고도이 작업을 수행 할 수있는 수단을 제공합니다 - Incognito

0

대신 속성 선택기를 사용하십시오.

var sel = $("[id='id[2][t]']");
sel.change(function() {
  $("#textpreview").val(sel.text());
});


  • 이 방법은 효과가 없습니다.textval잘못된 장소에서 사용되고 있습니다. - James Montagne
  • 트롤. 살벌한 트롤. 전체 문서의 속성 선택자는 천천히, 천천히, 천천히 천천히 진행됩니다. - Raynos
  • @ Raynos : 우리가합니까? 우리가 물건을 안다는 것을 어떻게 아는가? 나는 그것을 알지 못했다. 정중하게 대하고 그것을 설명해 주셔서 감사합니다. - Rocket Hazmat
  • @로켓 ;_; 속성 선택자는 전체 컨텍스트를 통과합니다 (document기본적으로 모든 단일 노드에서 해당 속성과 해당 값이 일치하는지 여부를 확인합니다. 사람들은 이것을 알고 있어야합니다 / 이해해야합니다. - Raynos
  • @Rocket DOM의 작동 원리.developer.mozilla.org/en/Using_the_W3C_DOM_Level_1_Core - Incognito

0

일반 오래된 자바 스크립트 :

var elem = document.getElementById('id[2][t]');

elem.onchange = function()
{
    var elem = document.getElementById('textpreview');
    elem.removeChild(elem.firstChild)
    elem.appendChild(document.createTextNode(this.value));
}

아 ... 이제 기분이 나아지지 않니?


  • 왜 안돼?elem.addEventListener('change', function () { ... }) - Raynos
  • 내가 당신을 분노하게하기 때문에, @ Raynos (또한,.onchange크로스 브라우저,addEventListener아니다) - Ryan Kinal
  • 지원하는 모든 브라우저.textContent지원.addEventListener귀하의 인수는 null입니다. - Raynos

-4

id 선택기 대신 속성 선택기를 사용해 볼 수 있습니다.

$('[id="id[2][t]"]')


  • 왜 하향 투표, 설명해 주겠니? - Rocket Hazmat
  • downvoter 아니지만이 답변을 볼 수 위의 답변을 중복 downvoted있어, 그것은 같은 이유로 수도 있습니다 :-) - Esailija
  • id에 대한 속성 선택자를 사용하는 개념은 나를 구토하게 만듭니다. - Raynos
  • @ Raynos : 그 이유는 무엇입니까? 나는 당신이 가지고있는 것 같아.\\[\\]? DOM의 한 항목에 대해서는 느린지 누가 신경 쓰나요? 이 조회를 캐싱하거나 나중에 클래스를 추가하거나 ID를 변경하여 나중에 조회 속도를 높일 수 있습니다. 나는 너에 대해 알지 못하지만 내 끈의 모든 곳에 백 슬래시가있는 것을 싫어한다. 나는 그들이 구토를 도울 수있는 약을 가지고 있다고 생각합니다. 기분이 나아 졌으면 좋겠어요. - Rocket Hazmat
  • @Rocket 나쁜 코드 관행을 추천 해 준 것에 대해 당신을 격찬합니다. 내 인터넷이 느리게 크롤링되기를 원하지 않습니다. - Raynos

연결된 질문


관련된 질문

최근 질문