HTML5 양식의 각 단어의 시작 부분에 해시 태그 (#)를 추가하십시오.

Question

HTML 문서의 한 페이지에 양식이 있으며 JavaScript 또는 jquery에 해시 태그 (#)를 추가하는 방법이 있는지 궁금합니다. 각 단어의 시작에 당신은의 keyup 이벤트 리스너에이를 수 있으며, 일부는 교체하고 같이 IndexOf

Answer 1

(한 단어가 입력보다 더있을 수 있습니다) :

<input id="test"> 

<script> 
var a = document.getElementById('test'); 
a.addEventListener('keyup',addthis); 

function addthis() { 
    b = a.value.replace('#',''); 
    a.value = '#'+b 

    if (a.value.indexOf(' ')) 
    { 
    a.value = a.value.replace(' ','#'); 
    } 

} 
</script> 

DEMO

Answer 2

이 무엇을합니까 부팅 할 필드의 끝으로 커서를 옮기고 싶습니다.

업데이트 :keydown instiedad를 사용하여 여러 공백을 필터링하십시오.

function addHash(event) { 
    if (event.keyCode === 32 && event.target.value.length) { 
     event.preventDefault(); 

     var elem = event.target, 
     val = elem.value; 

     if (val.slice(-1) !== '#') { 
      elem.value += ' #'; 
     } 
    } else if (!event.target.value.length) { 
     if (event.keyCode === 32) { 
      event.preventDefault(); 
     } 
     event.target.value = '#'; 
    } 
} 

테스트를 위해 바오 (baao)의 바이올린을 돌 렸습니다.

DEMO

Answer 3

당신이 JQuery와 onchange를 리스너 (EventListner)와 함께이 작업을 수행 할 수 있습니다.

아래 스크립트는 입력 필드의 값을 가져 와서 해당 단어를 공백 ""으로 분할하여 배열로 만듭니다. 단어의 배열에 물결표를 반복하고 단어의 시작 부분에 "#"이 없으면 단어를 추가합니다. 입력 필드의 이전 값을 새 값으로 바꿉니다.

$('#input').on('change', function(e){ 
    var input_string = $(this).val(); 
    var words = input_string.split(" "); 
    var output = ""; 
    console.log(words); 
    $.each(words , function(i, word){ 
     console.log(word); 
     if(word.substr(0, 1) == "#") 
     {    
      output += word + " ";   
     } 
     else 
     { 
      output += "#" + word + " ";  
     } 
     console.log(output); 
    }); 

    $(this).val(output); 
}); 

http://jsfiddle.net/dgs9kapc/6/