รับค่าในกล่องข้อความอินพุต

วิธีการรับและแสดงค่าอินพุตโดยใช้ jQuery มีวิธีใดบ้าง

นี่คือหนึ่ง:

$(document).ready(function() {
  $("#txt_name").keyup(function() {
    alert($(this).val());
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<input type="text" id="txt_name" />

//Get
var bla = $('#txt_name').val();

//Set
$('#txt_name').val(bla);

คุณสามารถเลือกค่าได้สองวิธีดังต่อไปนี้:

// First way to get a value
value = $("#txt_name").val(); 

// Second way to get a value
value = $("#txt_name").attr('value');

หากคุณต้องการใช้จาวาสคริปต์โดยตรงเพื่อรับค่านี่คือวิธี:

document.getElementById('txt_name').value 

มีสิ่งสำคัญที่ต้องพูดถึง:

$("#txt_name").val();

จะคืนค่าจริงในปัจจุบันของฟิลด์ข้อความตัวอย่างเช่นหากผู้ใช้พิมพ์บางสิ่งที่นั่นหลังจากโหลดหน้าเว็บ

แต่:

$("#txt_name").attr('value')

จะคืนค่าจาก DOM / HTML

คุณสามารถรับแอvalueททริบิวได้โดยตรงเนื่องจากคุณรู้ว่ามันเป็น<input>องค์ประกอบ แต่การใช้งานปัจจุบันของคุณ.val()เป็นสิ่งที่มีอยู่แล้วในปัจจุบัน

สำหรับด้านบนเพียงแค่ใช้.valueในองค์ประกอบ DOM โดยตรงเช่นนี้ :

$(document).ready(function(){
  $("#txt_name").keyup(function(){
    alert(this.value);
  });
});

คุณต้องใช้วิธีการต่าง ๆ เพื่อรับค่าปัจจุบันขององค์ประกอบการป้อนข้อมูล

วิธี - 1

ถ้าคุณต้องการที่จะใช้ง่าย.val()ลองนี้:

<input type="text" id="txt_name" />

รับค่าจากอินพุต

// use to select with DOM element.
$("input").val();

// use the id to select the element.
$("#txt_name").val();

// use type="text" with input to select the element
$("input:text").val();

ตั้งค่าเป็นอินพุต

// use to add "text content" to the DOM element.
$("input").val("text content");

// use the id to add "text content" to the element.
$("#txt_name").val("text content");

// use type="text" with input to add "text content" to the element
$("input:text").val("text content");

วิธี - 2

ใช้.attr()เพื่อรับเนื้อหา

<input type="text" id="txt_name" value="" />

ฉันเพิ่งเพิ่มคุณสมบัติหนึ่งไปยังช่องใส่ value=""คุณลักษณะเป็นผู้ดำเนินการเนื้อหาข้อความที่เราป้อนในช่องใส่

$("input").attr("value");

วิธี - 3

คุณสามารถใช้สิ่งนี้กับinputองค์ประกอบของคุณได้โดยตรง

$("input").keyup(function(){
    alert(this.value);
});

คุณสามารถรับค่าเช่นนี้:

this['inputname'].value

โดยthisอ้างถึงแบบฟอร์มที่มีอินพุต

ฉันคิดว่าฟังก์ชั่นนี้พลาดที่นี่ในคำตอบก่อนหน้า:

.val( function(index, value) ) 

ในการรับค่า textbox คุณสามารถใช้ jQuery val()ฟังก์ชัน

ตัวอย่างเช่น,

$('input:textbox').val() - รับค่ากล่องข้อความ

$('input:textbox').val("new text message") - ตั้งค่ากล่องข้อความ

สำหรับผู้ที่ชอบฉันเป็นมือใหม่ใน JS และได้รับการundefinedแทนค่าข้อความให้แน่ใจว่าคุณidไม่ได้มีตัวอักษรที่ไม่ถูกต้อง

คุณสามารถกำหนดค่าในกล่องข้อความ

ก่อนอื่นคุณจะได้รับความคุ้มค่า

var getValue = $('#txt_name').val();

หลังจากได้รับค่าที่ตั้งไว้ในการป้อนข้อมูลเช่น

$('#txt_name').val(getValue);

ลองสิ่งนี้ มันจะทำงานได้อย่างแน่นอน

var userInput = $('#txt_name').attr('value')