JQuery：在用戶輸入一個值後獲取輸入的值

Question

我試圖用jquery調整一個iFrame的大小。

有一個input用戶設置所需的寬度，然後我想爲iFrame元素設置此寬度。

這是我寫的代碼：

$(document).ready(function() { 

    var width = 300; 

    // Get the value of the input width box 
    $('form#WidgetConfigurator_width').keyup(function() { 
     alert("should get the innerHTML or text value here"); 
    }); 

    if (width < 180) { 
     width = 180; 
    } 

    if (width > 500) { 
     width = 500; 
    } 

    $('iframe#WidgetsContent').attr('width', width); 
}); 

問題是alert從未顯示，也如由默認值設定爲iFrame頁面的第一負載。 我正在一步一步做這件事，所以顯示警報是瞭解我走向正確的第一步。

<form name="WidgetConfigurator" method="post" action="/widgets" id="WidgetConfigurator" _lpchecked="1"> 
    <div id="WidgetConfigurator"> 
     <div> 
      <label for="WidgetConfigurator_width">Larghezza del widget</label> 
      <input type="text" id="WidgetConfigurator_width" name="WidgetConfigurator[width]"> 
     </div> 
    </div> 
</form> 

這是iFrame的代碼：

<iframe id="WidgetContent" src="http://127.0.0.1:8000/widget/1" frameborder="0" height="600"></iframe> 

我想實現的是用戶後iframe的大小調整設置寬度在做的input（同樣的事情Facebook在配置時Page plugin）

對此問題的任何建議？謝謝！

Answer 1

你有錯誤的選擇形式＃WidgetConfigurator_width它必須是 形式#WidgetConfigurator_width，我認爲你需要這樣的

$(document).ready(function() { 
 

 
    
 
    // Get the value of the input width box 
 
    $('form #WidgetConfigurator_width').keyup(function() { 
 

 
     var w=parseInt($(this).val()) 
 
\t  if (w< 180) { 
 
      w= 180; 
 
     } 
 

 
     if (w> 500) { 
 
      w= 500; 
 
     } 
 
\t 
 
    $('iframe#WidgetContent').width(w) 
 
    }); 
 

 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form name="WidgetConfigurator" method="post" action="/widgets" id="WidgetConfigurator" _lpchecked="1"> 
 
    <div id="WidgetConfigurator"> 
 
     <div> 
 
      <label for="WidgetConfigurator_width">Larghezza del widget</label> 
 
      <input type="text" id="WidgetConfigurator_width" name="WidgetConfigurator[width]"> 
 
     </div> 
 
    </div> 
 
</form> 
 
<iframe id="WidgetContent" src="http://127.0.0.1:8000/widget/1" frameborder="0" height="600"></iframe>

Answer 2

可能這裏是你搜索的內容：

<input type="text" onkeyup="resize(event, $(this).val())" id="WidgetConfigurator_width" name="WidgetConfigurator[width]"> 

和腳本：

var resize = function (e, w) { 
    if (e.keyCode == 13) { 
    $('iframe#WidgetsContent').prop('width', w); 
    } 
}; 

Answer 3

您呼叫到一個不存在的iframe，用下面的代碼首先要注意：

$('iframe#WidgetsContent').attr('width', width); 

之後，在第一行中，您將具有屬性的表單元素'id =「widgetConfigurator_width」也不存在。試試這個：

$('input#WidgetConfigurator_width').keyup(function() { 
alert("should get the innerHTML or text value here"); 
}); 

好運

Answer 4

代碼

試試這個：

$(document).ready(function() { 
 
\t var width = 300; 
 

 
\t // Get the value of the input width box 
 
\t $('#WidgetConfigurator_width').on('keyup', function(event) { 
 
\t \t if (event.keyCode === 13) { 
 
\t \t \t width = ($(this).val().length) ? $(this).val() : width; 
 
\t \t \t if (width < 180) { 
 
\t \t \t \t width = 180; 
 
\t \t \t } 
 

 
\t \t \t if (width > 500) { 
 
\t \t \t \t width = 500; 
 
\t \t \t } 
 

 
\t \t \t $('#WidgetContent').animate({'width': width}, 100); 
 
\t \t } 
 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name="WidgetConfigurator" method="post" action="/widgets" id="WidgetConfigurator" _lpchecked="1"> 
 
    <div id="WidgetConfigurator"> 
 
     <div> 
 
      <label for="WidgetConfigurator_width">Larghezza del widget</label> 
 
      <input type="text" id="WidgetConfigurator_width" name="WidgetConfigurator[width]"> 
 
     </div> 
 
    </div> 
 
</form> 
 
<br /> 
 
<iframe id="WidgetContent" src="http://127.0.0.1:8000/widget/1" frameborder="0" height="100"></iframe>