ජාවාස්ක්‍රිප්ට් භාවිතයෙන් පෙළ ආදාන ක්ෂේත්‍රයේ වටිනාකම ලබා ගන්නේ කෙසේද?

Question 1

මම ජාවාස්ක්‍රිප්ට් සමඟ සෙවීමක් කරමින් සිටිමි. මම පෝරමයක් භාවිතා කරමි, නමුත් එය මගේ පිටුවේ වෙනත් දෙයක් අවුල් කරයි. මට මෙම ආදාන පෙළ ක්ෂේත්‍රය ඇත:

<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

මෙය මගේ ජාවාස්ක්‍රිප්ට් කේතයයි:

<script type="text/javascript">
  function searchURL(){
    window.location = "http://www.myurl.com/search/" + (input text value);
  }
</script>

පෙළ ක්ෂේත්‍රයේ වටිනාකම ජාවාස්ක්‍රිප්ට් වෙත ලබා ගන්නේ කෙසේද?

Question 2

ආදාන පෙළ කොටුවේ අගය කෙලින්ම ලබා ගැනීම සඳහා විවිධ ක්‍රම තිබේ (ආකෘති මූලද්‍රව්‍යයක් තුළ ආදාන අංගය ඔතා නොගෙන):

ක්රමය 1:

document.getElementById('textbox_id').value අපේක්ෂිත කොටුවේ වටිනාකම ලබා ගැනීමට

උදාහරණයක් වශයෙන්, document.getElementById("searchTxt").value;

සටහන: ක්‍රමය 2,3,4 සහ 6 මඟින් මූලද්‍රව්‍ය එකතුවක් ලබා දෙයි, එබැවින් අපේක්ෂිත සිදුවීම ලබා ගැනීමට [සම්පූර්ණ_ අංකය] භාවිතා කරන්න. පළමු අංගය සඳහා, [0] භාවිතා කරන්න, දෙවැන්න 1 භාවිතා කරන්න , සහ එසේ ය ...

ක්රමය 2:

document.getElementsByClassName('class_name')[whole_number].valueසජීවී HTMLC එකතුවක් ලබා දෙන භාවිතා කරන්න

උදාහරණයක් ලෙස, document.getElementsByClassName("searchField")[0].value; මෙය ඔබේ පිටුවේ පළමු පෙළ කොටුව නම්.

ක්රමය 3:

භාවිතය document.getElementsByTagName('tag_name')[whole_number].valueද සජීවී HTMLCollection නැවත වන

උදාහරණයක් ලෙස, document.getElementsByTagName("input")[0].value; මෙය ඔබේ පිටුවේ පළමු පෙළ කොටුව නම්.

ක්රමය 4:

document.getElementsByName('name')[whole_number].value එය> සජීවී නෝඩ් ලැයිස්තුවක් ලබා දෙයි

උදාහරණයක් ලෙස, document.getElementsByName("searchTxt")[0].value; මෙය ඔබේ පිටුවෙහි 'සෙවුම් පෙළ' යන නම සහිත පළමු පෙළ කොටුව නම්.

ක්රමය 5:

document.querySelector('selector').valueමූලද්රව්යය තේරීමට CSS තේරීමක් භාවිතා කරන බලවත් භාවිතා කරන්න

උදාහරණයක් ලෙස, document.querySelector('#searchTxt').value; හැඳුනුම්පතකින්
document.querySelector('.searchField').value;තෝරාගත් පංතියෙන්
document.querySelector('input').value;තෝරාගත් ටැග්
document.querySelector('[name="searchTxt"]').value;නමෙන් තෝරාගනු ලැබේ

ක්රමය 6:

document.querySelectorAll('selector')[whole_number].value මූලද්‍රව්‍ය තෝරා ගැනීම සඳහා එය CSS තේරීම් කාරකයක් භාවිතා කරයි, නමුත් එය එම තේරීම් කාරකය සමඟ ඇති සියලුම අංග ස්ථිතික නෝඩ්ලිස්ට් ලෙස ලබා දෙයි.

උදාහරණයක් ලෙස, document.querySelectorAll('#searchTxt')[0].value; හැඳුනුම්පතකින්
document.querySelectorAll('.searchField')[0].value;තෝරාගත් පංතියෙන්
document.querySelectorAll('input')[0].value; තෝරාගත් ටැග්
document.querySelectorAll('[name="searchTxt"]')[0].value;නමෙන් තෝරාගනු ලැබේ

සහාය

Browser          Method1   Method2  Method3  Method4    Method5/6
IE6              Y(Buggy)   N        Y        Y(Buggy)   N
IE7              Y(Buggy)   N        Y        Y(Buggy)   N
IE8              Y          N        Y        Y(Buggy)   Y
IE9              Y          Y        Y        Y(Buggy)   Y
IE10             Y          Y        Y        Y          Y
FF3.0            Y          Y        Y        Y          N    IE=Internet Explorer
FF3.5/FF3.6      Y          Y        Y        Y          Y    FF=Mozilla Firefox
FF4b1            Y          Y        Y        Y          Y    GC=Google Chrome
GC4/GC5          Y          Y        Y        Y          Y    Y=YES,N=NO
Safari4/Safari5  Y          Y        Y        Y          Y
Opera10.10/
Opera10.53/      Y          Y        Y        Y(Buggy)   Y
Opera10.60
Opera 12         Y          Y        Y        Y          Y

ප්‍රයෝජනවත් සබැඳි

Question 3

//creates a listener for when you press a key
window.onkeyup = keyup;

//creates a global Javascript variable
var inputTextValue;

function keyup(e) {
  //setting your input text to the global Javascript Variable for every key press
  inputTextValue = e.target.value;

  //listens for you to press the ENTER key, at which point your web address will change to the one you have input in the search box
  if (e.keyCode == 13) {
    window.location = "http://www.myurl.com/search/" + inputTextValue;
  }
}

කෝඩපෙන් හි මෙම ක්‍රියාකාරීත්වය බලන්න.

Question 4

මේ ආකාරයට ආදානය ගබඩා කිරීම සඳහා මම විචල්‍යයක් නිර්මාණය කරමි:

var input = document.getElementById("input_id").value;

ඊට පස්සෙ මම විචල්යය පාවිච්චි කරන්නේ නූලට ආදාන අගය එකතු කරන්න.

= "Your string" + input;

Question 5

ඔබට මේ වගේ ටැග් නම් වලින් ඇමතිය හැකිය: form_name.input_name.value; එබැවින් ඔබට නිශ්චිත ආකාරයකින් නිශ්චිත ආදානයේ නිශ්චිත අගය ලැබෙනු ඇත.

Question 6

ඔබට ටයිප් කිරීමට හැකි විය යුතුය:

var input = document.getElementById("searchTxt");

function searchURL() {
     window.location = "http://www.myurl.com/search/" + input.value;
}

<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

ස්නිපටය පුළුල් කරන්න

මෙය කිරීමට වඩා හොඳ ක්‍රම ඇති බව මට විශ්වාසයි, නමුත් මෙය සියලු බ්‍රව්සර් හරහා ක්‍රියාත්මක වන බව පෙනේ, එය සෑදීම, වැඩිදියුණු කිරීම සහ සංස්කරණය කිරීම සඳහා ජාවාස්ක්‍රිප්ට් පිළිබඳ අවම අවබෝධයක් අවශ්‍ය වේ.

Question 7

මෙය උත්සාහ කරන්න

<input type="text" onkeyup="trackChange(this.value)" id="myInput">
<script>
function trackChange(value) {
    window.open("http://www.google.com/search?output=search&q=" + value)
}
</script>

Question 8

Chrome සහ Firefox හි පරීක්ෂා කර ඇත:

මූලද්‍රව්‍ය හැඳුනුම්පත අනුව අගය ලබා ගන්න:

<input type="text" maxlength="512" id="searchTxt" class="searchField"/>
<input type="button" value="Get Value" onclick="alert(searchTxt.value)">

ආකෘති මූලද්‍රව්‍යයේ අගය සකසන්න:

<form name="calc" id="calculator">
  <input type="text" name="input">
  <input type="button" value="Set Value" onclick="calc.input.value='Set Value'">
</form>

https://jsfiddle.net/tuq79821/

ජාවාස්ක්‍රිප්ට් කැල්කියුලේටරය ක්‍රියාත්මක කිරීම දෙස බලන්න: http://www.4stud.info/web-programming/samples/dhtml-calculator.html

@ Bugwheels94 වෙතින් යාවත්කාලීන කරන්න: මෙම ක්‍රමය භාවිතා කරන විට මෙම ගැටළුව පිළිබඳව දැනුවත් වන්න .

Question 9

පෝරමයක සියලුම අංග ලබා ගැනීමට කෙනෙකුට form.elements භාවිතා කළ හැකිය. මූලද්‍රව්‍යයකට හැඳුනුම්පතක් තිබේ නම් එය .namedItem ("id") සමඟ සොයාගත හැකිය. උදාහරණයක්:

var myForm = document.getElementById("form1");
var text = myForm.elements.namedItem("searchTxt").value;
var url = "http://www.myurl.com/search/" + text;

මුලාශ්‍රය: w3 පාසල්

Question 10

ඔබට වැඩි ආදාන ක්ෂේත්‍රයක් ඇති විට ඔබට onkeyup භාවිතා කළ හැකිය. ඔබට හතරක් හෝ ආදානයක් ඇතැයි සිතමු. එවිට document.getElementById('something').valueකරදරයක් වේ. ආදාන ක්ෂේත්‍රයේ අගය ලබා ගැනීම සඳහා අපට පේළි 4 ක් ලිවිය යුතුය.

එබැවින්, යතුරු හෝ යතුරුපුවරු සිදුවීම මත වස්තුවෙහි අගය ගබඩා කරන ශ්‍රිතයක් ඔබට නිර්මාණය කළ හැකිය.

උදාහරණයක් :

<div class="container">
    <div>
        <label for="">Name</label>
        <input type="text" name="fname" id="fname" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Age</label>
        <input type="number" name="age" id="age" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Email</label>
        <input type="text" name="email" id="email" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Mobile</label>
        <input type="number" name="mobile" id="number" onkeyup=handleInput(this)>
    </div>
    <div>
        <button onclick=submitData()>Submit</button>
    </div>
</div>

javascript:

<script>
    const data={ };
    function handleInput(e){
        data[e.name] = e.value;
    }
    function submitData(){
        console.log(data.fname); //get first name from object
        console.log(data); //return object
    }
</script>

Question 11

ඔබ inputa හි සිටී නම් formසහ ඉදිරිපත් කිරීමෙන් පසු ඔබට වටිනාකමක් ලබා ගැනීමට අවශ්‍ය නම් ඔබට එය කළ හැකිය

<form onsubmit="submitLoginForm(event)">
    <input type="text" name="name">
    <input type="password" name="password">
    <input type="submit" value="Login">
</form>

<script type="text/javascript">

    function submitLoginForm(event){
        event.preventDefault();

        console.log(event.target['name'].value);
        console.log(event.target['password'].value);
    }
</script>

මේ ආකාරයෙන් ප්‍රතිලාභ: ආදානය සහ තොරතුරු සඳහා ඔබේ පිටුවට 2 ක් ඇති උදාහරණය . formsenderreceiver

නම් ඔබ භාවිත කරන්නේ නැහැ formඑහෙනම්, අගය කිරීම සඳහා
- ඔබ 2 විවිධ සැකසිය හැක id(හෝ tagහෝ nameවැනි, එක් එක් අංශය සඳහා ...) sender-nameහා receiver-name, sender-addressහා receiver-address, ...
- ඔබ 2 ආදානය සඳහා එම අගය සකස් නම්, පසු getElementsByName(හෝ getElementsByTagName.. .) ඔබ මතක තබා ගත යුත්තේ 0 හෝ 1 වේsender හෝ receiver. පසුව ඔබ formhtml හි 2 අනුපිළිවෙල වෙනස් කරන්නේ නම් , ඔබ මෙම කේතය නැවත පරීක්ෂා කළ යුතුය

නම් ඔබ භාවිතා form, ඔබ භාවිතා කළ හැකිය name, address...

Question 12

<input id="new" >
    <button  onselect="myFunction()">it</button>    
    <script>
        function myFunction() {
            document.getElementById("new").value = "a";    
        }
    </script>

Question 13

සරල ජේ

function copytext(text) {
    var textField = document.createElement('textarea');
    textField.innerText = text;
    document.body.appendChild(textField);
    textField.select();
    document.execCommand('copy');
    textField.remove();
}

Question 14

ඔබට අගය කියවිය හැකිය

searchTxt.value

function searchURL() {
   let txt = searchTxt.value;
   console.log(txt);
   // window.location = "http://www.myurl.com/search/" + txt; ...
}

document.querySelector('.search').addEventListener("click", ()=>searchURL());

<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

<button class="search">Search</button>

යාවත්කාලීන කරන්න

මම බොහෝ අඩුපාඩු දකින නමුත් ඕනෑම අදහස් දැක්වීමක් - කෙසේ වෙතත් (අනාගත පා readers කයින් සඳහා) ඇත්ත වශයෙන්ම මෙම විසඳුම ක්‍රියාත්මක වේ

Question 15

ඔබ jQuery භාවිතා කරන්නේ නම් ප්ලගිනය formInteract භාවිතා කිරීමෙන් ඔබට මෙය කළ යුතුය:

// Just keep the HTML as it is.

<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

පිටුවේ පතුලේ මෙම ප්ලගීන ගොනුව ඇතුළත් කර මෙම කේතය ලියන්න:

// Initialize one time at the bottom of the page.
var search= $("#searchTxt).formInteract();

search.getAjax("http://www.myurl.com/search/", function(rsp){
    // Now do whatever you want to with your response
});

නැතහොත් පරාමිතිගත URL එකක් භාවිතා කරන්නේ නම් මෙය භාවිතා කරන්න:

$.get("http://www.myurl.com/search/"+search.get().searchTxt, {}, function(rsp){
    // Now do work with your response;
})

ව්යාපෘතිය සඳහා සබැඳිය මෙන්න https://bitbucket.org/ranjeet1985/forminteract

පෝරමයක වටිනාකම ලබා ගැනීම, ආකෘති පත්රයකට අගයන් දැමීම, පෝරම වලංගු කිරීම සහ තවත් බොහෝ අරමුණු සඳහා ඔබට මෙම ප්ලගිනය භාවිතා කළ හැකිය. ව්යාපෘතියේ index.html ගොනුවේ කේත පිළිබඳ උදාහරණයක් ඔබට දැක ගත හැකිය.

ඇත්ත වශයෙන්ම මම මෙම ව්‍යාපෘතියේ කතුවරයා වන අතර එය වඩා හොඳ කිරීමට සියලු දෙනා සාදරයෙන් පිළිගනිමු.