다른 입력 값을 기준으로 입력 값을 변경하십시오.

Question

제목이 의미가 있기를 바랍니다. 나는 자바 스크립트에서 멍청한 놈이야. 내가하고 싶은 것은 예를 들어 이름과 URL과 같은 두 개의 입력을 가질 양식을 갖는 것입니다.

사용자가 이름을 입력하면 url 입력에 자동으로 단어 사이에 밑줄이있는 이름이 기본적으로 표시됩니다. 그래서 그들이 이름을 pedro_kinkybottom이 될 URL 입력에 기본값으로 자동으로 설정된 그들의 페드로 kinkybottom으로 입력하면.

누군가가 특히 케이크 같은 방법으로 시원할 수 있다는 것을 알게되면 cakephp를 사용합니다. 그렇지 않으면 어떤 도움도 전혀 환영받지 못할 것입니다.

감사합니다,

페드로

Answer 1

당신은 아마도 JavaScript가 아니라 PHP에서 이것을하고 싶을 것입니다. 후자에 더 익숙 할지라도 이전과 전반적인 디자인이 더 쉬울 것입니다 (페이지를 새로 고칠 필요가 없기 때문에).

당신은 기본적으로 두 가지 작업을 수행해야합니다

1. 다른 입력에 이벤트에 대한 응답으로 입력의 값을 설정합니다.
2. 공백 문자를 밑줄 문자로 바꿉니다.

두 번째 부분은 JavaScript의 replace 기능을 살펴보십시오. 꽤 강력하고 많은 문자열 조작을 할 수 있습니다. 자신을 시험해 볼만한 가치가 있습니다. 첫 번째 부분에 대한

, 여기 jQuery으로 예입니다 :

$('#inputName').change(function() { 
    $('#inputURL').val($('#inputName').val()); 
}); 

이 언제든지에게 inputName의 값으로 inputName 변경의 값을 inputURL의 값을 설정합니다. 문자열 대체를 들어, 다음에 그와 유사한 수정 것 :

$('#inputName').change(function() { 
    $('#inputURL').val($('#inputName').val().replace(' ', '_')); 
}); 

참고 컨트롤이 포커스를 잃었을 때 change 이벤트가 시작됩니다. 원하는 유형으로 진행하려면 keyup 이벤트를 시도하십시오. other events도 있습니다.

Answer 2

URL 필드 업데이트됩니다 이름 필드에의 keyup 이벤트 추가 :

<form> 
    <input type="text" id="name" /> 
    <input type="text" id="url" /> 
</form> 

을 ... 그리고 JS :

addEvent(document.getElementById('name'), 'keyup', function() { 
    document.getElementById('url').value = this.value.replace(' ', '_'); 
}); 


function addEvent(ele, evnt, funct) { 
    if (ele.addEventListener) // W3C 
    return ele.addEventListener(evnt,funct,false); 
    else if (ele.attachEvent) // IE 
    return ele.attachEvent("on"+evnt,funct); 
} 

을

http://jsfiddle.net/XKEh5/

이와 같은 사소한 작업 만 수행하려는 경우 보통의 오래된 자바 스크립트로도 충분합니다. 만약 당신이 이런 종류의 일을 많이하고, 요소 나 겹침 선을 페이드 아웃하는 것과 같은 어떤 효과가 있다면, mootools이나 jQuery으로 넘어갈 것을 제안합니다.

Answer 3

위의 답변은 수정 된 버전입니다. "value.replace(' ', '_');"에 처음 두 단어 사이에 공백이 들어가는 문제가있었습니다. 아래의 코드 스 니펫은 모든 작업을 수행합니다.

<script language="javascript" type="text/javascript"> 

addEvent(document.getElementById('name'), 'keyup', function() {  
    document.getElementById('url').value = this.value.split(' ').join('');  
});  

function addEvent(ele, evnt, funct) { 

    if (ele.addEventListener) // W3C  
    return ele.addEventListener(evnt,funct,false); 

    else if (ele.attachEvent) // IE  
    return ele.attachEvent("on"+evnt,funct); 

} 

</script>