jquery：mousedown(func)

上記のプログラムは下記のプログラムで構成されています。

HTML部分

<form action='' method='post'>
	<p>データを入力してください</p>
	<p><input type='text' name='text' class='text' value='' size=40 ></p>
  <button type='submit' name='action'	value='input_text01'>送信</button>
</form>
<p class='msg01' style='color:red;'><?php esc_html_e($input_submit_msg); ?></p>

■3行目：<input>タグの指定

typeは 'text' で、valueは 空白 です。

■form全体の説明はPHPのフォーム操作を参照して下さい。

PHP部分

<?php
	if($_POST['action'] == 'input_text01'){
		$text	= $_POST['text'];
		$input_submit_msg = '入力データは【'.$text.'】です。';
	}
?>

■上記は、送信ボタンが挿入された時だけ処理され入力されたデータを表示します。

<style>
	.text{box-shadow: 0 0 0 20px white inset;}
</style>

下記は上記のCSSを設定した例です。

上記のプログラムは下記のプログラムで構成されます。

HTML部分

<form action='' method='post' >
	<p>データを入力してください</p>
	<p><input type='text' name='text' 	class='text' size=40 autocomplete='off'></p>
  <button type='submit' name='action'	value='input_text02'>送信</button>
</form>
<p class='msg01' style='color:red;'><?php esc_html_e($input_submit_msg); ?></p>

■3行目：<input>タグ

ここに autocomplete='off' を指定する事によりコンプリート機能をOFFにします。

PHP部分

<?php
	if($_POST['action'] == 'input_text02'){
		$text	= $_POST['text'];
		$input_submit_msg = '入力データは【'.$text.'】です。';
	}
?>

■上記は、送信ボタンが挿入された時だけ処理され入力されたデータを表示します。

上記のプログラムは下記のプログラムで構成されます。

HTML部分

<form action='' method='post'>
	<p> アカウント: <input type='text'			name='u-id01'	class='u-id01'	value=''	size='20'	autocomplete='off'></p>
	<p> パスワード: <input type='password'	name='pass01'	class='pass01'	value=''	size='20'	autocomplete='new-password'></p>
	<input type='hidden' name='position' value=''>  		<!-- 送信ボタンが挿入されて時にjQueryでValue値を設定します-->
	<button type='submit' name='action'	value='input_pass01'>送信</button>
</form>
<p class='msg01' style='color:red;'><?php esc_html_e($input_submit_msg); ?></p><!-- submit後の表示エリア -->

■2行目：<input type='text'>

アカウント単独で保存したくないので autocomplete='off'を指定しています。

■3行目：<input type='password'>

アカウントとパスワードのセットで登録したいので autocomplete='new-password' を指定しています。

PHP部分

<?php
	if($_POST['action'] == 'input_pass02'){
		$name	= $_POST['u-id02'];
		$pass	= $_POST['pass02'];
		$input_submit_msg = '【'.$name.'】と【'.$pass.'】が入力されました';
	}
?>

■上記は、送信ボタンが挿入された時だけ処理され入力されたデータを表示します。

上記のプログラムは下記のプログラムで構成されます。

HTML部分

<form action='' method='post'>
	<p> アカウント: <input type='text'			name='u-id02'	class='u-id02'	value='　'	size=20	autocomplete='off'></p>
	<p> パスワード: <input type='password'	name='pass02'	class='pass02'	value=''	size=20 ></p>
	<button type='submit' name='action'	value='input_pass02'>送信</button>
</form>
<p class='msg01' style='color:red;'><?php esc_html_e($input_submit_msg); ?></p><!-- submit後の表示エリア -->

■2行目：<input type='text'>

アカウント単独で保存したくないので autocomplete='off'を指定しています。

value値はパスワードの自動入力をOFFにしたいために全角のスペースを入れています。

■3行目：<input type='password'>

パスワードを保存したくないので autocomplete='new-password' は指定していません。

script部分

<script>
	window.onload = function(){$(window).scrollTop(<?php esc_html_e($_POST['position']); ?>);}//画面の表示位置を指定します
	$(function(){
		$('.u-id02').mousedown(function(){$('.u-id02').attr('value','');setTimeout(function(){$('.u-id02').focus();},0);return false;}); // タイマー処理でカーソルをフィールドにセットし、return falseで終了しています。
		$('.pass02').mousedown(function(){setTimeout(function(){$('.pass02').focus();},0);return false;}); // 同上
	});
</script>

■4行目：パスワード欄のオートコンプリートのOFFの処理

オートコンプリートは、マウスがダウンした時に起動されますが、Tabキーで入力エリアに来た時は起動しません。（firefoxはtabキーでも起動するのでオートコンプリートOFFはできません）

そこで、マウスがダウンを検知した時にタイマー0秒でカーソルをフォーカスさせてfalseで返すことによりコートコンプリートの起動を阻止しています。

■3行目：アカウント欄の処理

オートコンプリートにOFF処理の前に、全角スペースを削除する処理を入れています。

PHP部分

<?php
	if($_POST['action'] == 'input_pass02'){
		$name	= $_POST['u-id02'];
		$pass	= $_POST['pass02'];
		$input_submit_msg = '【'.$name.'】と【'.$pass.'】が入力されました';
	}
?>

■上記は、送信ボタンが挿入された時だけ処理され入力されたデータを表示します。