htmlを作るには<input>タグにあらかじめ書き込まれたデータがあります

Question

私はプロジェクトで作業しています。テストするために、ページをリロードするたびに大量の '入力'要素を入力する必要があります。私は毎回同じ数字を記入しているので、何らかの形で与えられた価値を「覚えている」ためには、「入力」要素が必要です。 'autocomplete'属性の例を見てきましたが、各入力要素のドロップボックスから値を選択する必要があります。

あらかじめ書き込まれたデータで入力タグをコーディングする方法はありますか？または、おそらくJavaScriptを使用して？

Answer 1

ここunput値

<form > 
    First name: <input type="text" name="fname" value="John"><br> 
    Last name: <input type="text" name="lname" value="Doe"><br> 

</form> 

Answer 2

ご入力では、valueタグを使用して、デフォルト値を設定することができます。

<input type="text" name="example" value="Value Goes Here"> 

Answer 3

あなたはより多くのまたは以下の作業方法オートコンプリートを伝えることができます：https://html.spec.whatwg.org/multipage/forms.html#autofill

しかしが、それはまだそれをブラウザに任せて。

より良いオプションは、自動入力とのドロップダウンメニューのための定義済みのオプションを持つテキスト入力を与える、datelistです。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

<label>Choose a browser from this list: 
 
    <input list="browsers" name="myBrowser" /> 
 
</label> 
 
<datalist id="browsers"> 
 
    <option value="Chrome"> 
 
    <option value="Firefox"> 
 
    <option value="Internet Explorer"> 
 
    <option value="Opera"> 
 
    <option value="Safari"> 
 
    <option value="Microsoft Edge"> 
 
</datalist>

EDIT：

もう一度あなたの質問を読んだ後、私はこれはあなたのユースケースのために非常に良いではないことに気づきました。ごめんなさい。私はjQueryの単一のラインで行くと思いますその場合には

：jQueryを使って

$('input[type="text"]').val('Hello world') ;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="text" name="t1" /> 
 
<input type="text" name="t2" /> 
 
<input type="text" name="t3" /> 
 
<input type="text" name="t4" /> 
 
<input type="text" name="t5" /> 
 
<input type="text" name="t6" /> 
 
<input type="text" name="t7" />

Answer 4

、あなたはデータに基づいてフィールドの入力を設定するためのプラグインを作成することができます。

jQueryを使用せずに同じことができますが、値を設定する前に、すべての入力、テキストエリア、選択などを検索し、フォームから他のジャンクをフィルタリングする必要があります。あなたはテキストをする必要がある場合は

var mystring = "This is my string of text"; 
var anotherString = "A second string of text"; 

var myInputs = document.getElementsByTagName("input"); 


myInputs[0].value = mystring; 
myInputs[1].value = anotherString; 

：

は、より多くのヒントについては、この質問をチェックアウト：JavaScriptを使用してUsing jQuery and JSON to populate forms?

(function($) { 
 
    $.fn.populateData = function(data) { 
 
    var $form = this; 
 
    $.each(data, function(key, value) { 
 
     $('[name=' + key + ']', $form).val(value); 
 
    }); 
 
    } 
 
})(jQuery); 
 

 
var pocForm = document.forms['poc-form']; 
 
var pocFormData = { 
 
    fname : 'John', 
 
    lname : 'Doe', 
 
    dob : '1970-12-25' 
 
}; 
 

 
$(pocForm).populateData(pocFormData);

.form-field { 
 
    margin-bottom: 0.25em; 
 
} 
 
.form-field label { 
 
    display: inline-block; 
 
    width: 6em; 
 
    font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name="poc-form"> 
 
    <div class="form-field"> 
 
    <label for="poc-fname">First Name:</label> 
 
    <input type="text" id="poc-fname" name="fname" /> 
 
    </div> 
 
    <div class="form-field"> 
 
    <label for="poc-lname">Last Name:</label> 
 
    <input type="text" id="poc-lname" name="lname" /> 
 
    </div> 
 
    <div class="form-field"> 
 
    <label for="poc-dob">Date of Birth:</label> 
 
    <input type="date" id="poc-dob" name="dob" /> 
 
    </div> 
 
</form>

Answer 5

を、あなたは、文字列内の静止テキストを使用することができますユーザーが入力したデータである場合は、まずテキストを保存する必要があります。

tx = myInputs[0].value 
localStorage.setItem("item_name", tx); 
//note: you would need to use a keyup event or button to save the data as the user types or clicks the button. Also look in to JSON "stringify" and "parse" to save more complex items. 

希望のデータを保存したら、それを呼び出して希望の入力を指します。

var savedTx = localStorage.getItem("item_name"); 

if (savedTx) {//it's important to look for the data first to avoid errors 
    myInputs[0].value = "My data: " + savedTx + "!"; 
}