jquery 동적으로 오류가있는 입력에서 div 만들기

두 개의 텍스트 입력이있는 양식이 있습니다. 사용자 타입은이 필드에 값 때jquery 동적으로 오류가있는 입력에서 div 만들기

<form> 
    1<input type="text" id="test" name="test" /> 
    2<input type="text" id="test2" name="test" /> 
</form> 
<div id="dimensions"></div> 
<div id="texte"></div>

는 jQuery를 자동으로 만하여 200x200 픽셀까지의 비율을 계산하고, 폭과 형태로 입력 높이 DIV 직사각형을 그린다.

제 문제는 너비 = 3, 높이 = 100과 같이 입력 할 때 내 div가 최대 크기보다 크고 실수가있는 부분을 찾을 수 없다는 것입니다.

$(document).ready(function() { 
    $("#test, #test2").keyup(function() { 
     var width = $("#test").val(); 
     var height = $("#test2").val(); 
     var max = 200; 
     var min = 20; 

    var ratio; 
    if(width>=height){ 
     ratio = max/width; 
     width = ratio * width; 
     height = height * ratio; 
    } else { 
     ratio = max/height; 
     height = ratio * height; 
     width = width * ratio; 
    }; 
     $("#dimensions").html(width + " x " + height); 
     $("#texte").css({ "width":width + "px", "height":height + "px" }); 

    }); 
});

는

jsfiddle link

출처

2013-07-01 scooti

을 참조하십시오. – Jonathan

변수에 최대 = 200 – scooti

그건 아니고 확인 ... – Jonathan

입력을 올바르게 처리했는지 확인하십시오. 입력 값은 숫자가 아닌 문자열을 제공합니다. 당신은 그들을 변환하고 적절한 수표를 만들어야하지만, 당신이 원한다.

예를 들어, 당신은으로 parseInt 필요하고 빈 문자열에 계산을 수행하지 있는지 확인

http://jsfiddle.net/blackjim/ABWV6/5/

$(document).ready(function() { 
    $("#test, #test2").keyup(function() { 
     var width = parseInt($("#test").val(),10) || ''; 
     var height = parseInt($("#test2").val(),10) || ''; 

     if (!(typeof width === 'number' && typeof height === 'number')) { 
      return false; 
     } 
     var max = 200; 
     var min = 20; 

     var ratio; 
     if (width >= height) { 
      ratio = max/width; 
      width = ratio * width; 
      height = height * ratio; 
     } else { 
      ratio = max/height; 
      height = ratio * height; 
      width = width * ratio; 
     }; 

     $("#dimensions").html(width + " x " + height); 
     $("#texte").css({ 
      "width": width + "px", 
      "height": height + "px" 
     }); 

    }); 
});

출처

2013-07-01 17:20:52 AntouanK

typeof에 좋은 캐치 –

예 Antonis, 고마워 .. 내 문제가있었습니다. – scooti

에 한번 당신의 너비와 높이 입력에 parseInt 추가 :

var width = parseInt($("#test").val()); 
var height = parseInt($("#test2").val());

편집을Adrian Trainor으로

는 삼항 연산자이 유용 할 것이다, 그러나 지적 상황, 당신은 입력이 확실히 숫자라는 것을 모르기 때문에.

var width = $("#test").val() ? parseInt($("#test").val() : 0; 
var height = $("#test2").val() ? parseInt($("#test2").val() : 0;

는 문자열 비교를하고 하나가 다른 것보다 더 큰 경우 다음 점검 것처럼 보이는 here

참조하십시오. 무슨 일이 일어나고 있는지 이해하려면 this question을 참조하십시오.

출처

2013-07-01 17:10:58

감사합니다. Ian Clark .. 내 문제가있었습니다. – scooti

문제 없음 Scooti :) - 당신이 옳은 대답을 선택했다면 느낄 수 있겠습니까? –

(당신은 당신이 사용자에 의해 허용되는 고려 사항에 따라 더 많은 검사를 할 수 있습니다) . 삼항 연산자는이 유용하다 :

var width = $("#test").val() ? parseInt($("#test").val()) : 0; 
var height = $("#test2").val() ? parseInt($("#test2").val()) : 0;

이 방법은 필드가 비어있는 경우에도 계산은 0 대신 빈 문자열로 사용하여 수행됩니다.

출처

2013-07-01 17:30:39

너비/높이가 존재하고 20-200 범위에 있는지 확인하려면 예제를 현대화했습니다.

jsfiddle.net/ABWV6/9/

출처

2013-07-01 17:37:39 Pinal

jquery 동적으로 오류가있는 입력에서 div 만들기

답변

관련 문제