ミニチュアハウスをつくる!

模型製作プロによる趣味のミニチュアハウス製作ブログ-1/87-1/160サイズ-

inputの幅を調整

本日も晴れて、過ごしやすい。

そろそろ、house13にいかないと。。。

inputのnumberタイプの幅

昨日は、インプットのナンバータイプの幅を調整してみた。デフォルトのままだとデカ過ぎ。。。

通常ならHTML側で簡単に幅を調整できてもよさそうなもんなのだが、何でそういった項目がないのだろう??

textタイプなら表示文字数という形で簡単に出来るようだが。。。

・・・っで、いろいろ調べたり試行錯誤してみたら、まあとにかく幅をいじることに成功した。。。

今回はJSファイルを作ってそれを読み込ませる形で全体を作成。

JSファイル内で、オブジェクト階層をたどってstyle.widthという幅のプロパテイーに60pxという幅をぶちこみ、それをwchk()という関数とした

ロード開始とともにwchk()を実行させて幅を小さくすることが出来た。他にも方法はあるだろうな。。。

まあ、とりあえず不具合も無いので、よしとした。

完成品は http://penkem.main.jp/25.html にて。。(一番下のスライダーはただ入れてみただけで、何も機能しません。。。)

 

下記はJSソースと概観絵

  window.onload = wchk;
 
  function wchk() {
      document.forms.form1.textBox1.style.width = "60px";
      document.forms.form1.textBox2.style.width = "60px";
      document.forms.form1.textBox3.style.width = "60px";}
 
  function onButton1Click() {
      document.forms.form1.textBox1.value = "";}
 
 
  function onButton2Click() {
      document.forms.form1.textBox2.value = "";}
 
  function onButton3Click() {
      var tate = document.forms.form1.textBox1.value;
      var yoko = document.forms.form1.textBox2.value;
      var goukei = tate * yoko;
      document.forms.form1.textBox3.value = goukei;}
 
  function onButton4Click() {
      document.forms.form1.range1.value = 5}

 

f:id:lis2016zz:20170925140404p:plain

 

ペンケム模型作品(Instagram)
PenkeM作品集

 

にほんブログ村 ハンドメイドブログ ミニチュアドールハウスへ にほんブログ村 鉄道ブログ 鉄道模型へ にほんブログ村 鉄道ブログ 鉄道模型 レイアウト製作(ストラクチャー)へ