元素自身属性-2

input 通用属性

input 对应的DOM对象类型是 HTMLInputElement

常用的通用属性和方法有:

  • value

    value属性对应输入框里面的文本

  • name

    对应name属性

  • type

    对应type属性

  • disabled

    是个bool值,表示该按钮是否被禁用,禁用为true,可用为false


下面是一些示例



<input type="text" name="text1">
<button>显示value</button>

<br><br>
<input type="number" name="number1">
<button>显示value</button>


<br><br>
<input type="radio" value="男" name="radio1">
<button>显示value</button>


<br><br>
<input type="checkbox" value="43" name="radio1">
<button>显示value</button>

<br><br>
<input type="color" name="color1">
<button>显示value</button>

<br><br>
<input type="range" name="range1">
<button>显示value</button>

<br><br>
<input type="date" name="date1">
<button>显示value</button>

<br><br>
<input type="time" name="time1">
<button>显示value</button>

<br><br>
<input type="datetime-local" name="datetime-local1">
<button>显示value</button>


<script>
  function getValue(idx){return input[idx].value}
  let buttons = document.querySelectorAll('button')
  let inputs = document.querySelectorAll('input')
  for (let i = 0; i < buttons.length; i++) {
    let j=i
    buttons[i].addEventListener('click', ()=> {
      alert(`type是 ${inputs[j].type} 
value 是 ${inputs[j].value}
name  是 ${inputs[j].name}`)
    })
  } 
  
</script>

input - text,email,password,number

类型是 text,email,password,number 等这些输入框input,有如下属性

  • maxLength/minLength

    对应 maxLength/minLength 属性,也就是最多和最少输入的字符数量

  • placeholder

    对应 placeholder 属性

  • readOnly

    对应 readOnly 属性,

  • size

    对应 size 属性,

  • select()

    全部选中输入框里面的文本

    调用该方法前面通常需要先调用focus方法

  • setSelectionRange(selectionStart, selectionEnd)

    选中指定部分内容,

    参数 selectionStart 指定了选中的开始字符索引, selectionEnd指定了选中的结尾字符索引+1, 索引从0开始计数

    调用该方法前面通常需要先调用focus方法

  • setRangeText(replacement, start, end)

    用新字符串替换输入框中指定部分内容,

    参数 replacement 指定用来替换的字符串

    参数 start, end 是可选参数,

    如果没有 start,end 参数,会替换用户选中部分内容,如果用户没有选中内容,则插入到光标位置

    如果 有 start,end 参数, 分别指定了替换的开始字符索引 和 结尾字符索引+1, 索引从0开始计数。



<input type="text" id="text-box" size="20" value="Hello world!">

<br><br>

<button id="1">显示文本</button>
<button id="2">选择全部文本</button>
<button id="3">选中前2个字符</button>
<button id="4">setRangeText('ab')</button>
<button id="5">setRangeText('ab',1,3)</button>

<script>
  let [b1,b2,b3,b4,b5] = document.querySelectorAll('button')
  let input = document.querySelector('#text-box')

  b1.addEventListener('click', ()=> {
    alert(`输入框中的内容是${input.value},替换为 白月黑羽`)
    input.value = '白月黑羽'
  })

  b2.addEventListener('click', ()=> {
    input.focus()
    input.select()
  })

  b3.addEventListener('click', ()=> {
    input.focus();
    input.setSelectionRange(0, 2);
  })

  b4.addEventListener('click', ()=> {
    input.setRangeText('ab');
  })
  
  b5.addEventListener('click', ()=> {
    input.setRangeText('ab',1,3);
  })
</script>

input - number

类型是 number 的数字输入框, 除了上述属性外,还有下面的属性

  • max、min

    max指定了 输入框 可输入数字最大值,超过该值时会有错误提示,

    min指定了 输入框 可输入数字最小值,小于该值时会有错误提示,

    点击增加箭头,不会超过该数值

    比如


      <input type="number" max="10" min="5"/>
    
      <script>
        const input = document.querySelector('input')
        input.max = 20 
        input.min = 10
      </script>
    


  • step

    一个数字,表示输入框数字的增减单位,

    指示输入框点击上下箭头时,会按这个step为粒度增减。

    当输入的数字不是该值的倍数时,会有错误提示

    比如


      <input type="number" step="2"/>
    
      <script>
        const input = document.querySelector('input')
        input.step = 3
      </script>
    

input - radio,checkbox

下面是 raido 或者 checkbox 类型的 input 常用属性

  • checked

    该属性值为bool类型,表示是否选中

  • defaultChecked

    该属性值为bool类型,表示缺省(页面刚加载完成时)是否选中


下面是radio示例


<div>您的性别是

  <br>
  <input type="radio" id="female" name="gender" value="a">
  <label for="female">女</label>
  <button id="1">显示checked</button>
  
  <br>  
  <input type="radio" id="male" name="gender" value="b" checked>
  <label for="male">男</label>
  <button id="2">显示checked</button>

</div>

<br>

<button id="3">显示选择value</button>

<script>
  function getValue(idx){return input[idx].value}
  let [b1,b2,b3] = document.querySelectorAll('button')

  let female = document.querySelector('#female')
  let male = document.querySelector('#male')

  b1.addEventListener('click', ()=> {
      alert(`checked 是 ${female.checked},defaultChecked 是 ${female.defaultChecked}`)
  })

  
  b2.addEventListener('click', ()=> {
      alert(`checked 是 ${male.checked}, defaultChecked 是 ${male.defaultChecked}`)
  })
 
  
  b3.addEventListener('click', ()=> {
      alert(`选择的value是 
      ${document.querySelector('input[name="gender"]:checked').value}`)
  })
  
</script>

注意: input[name="gender"]:checked 里面的 :checked 是CSS伪类选择,表示选择checked状态的元素,对radio和checkbox 类型的input有效


下面是checkbox示例


<div id="lang-choose">选择你要学习的语言
  <div>
    <input type="checkbox" id="Python" name="Python" value='1'>
    <label for="Python">Python</label>
    <button id="1">显示checked</button>
  </div>
  <div>
    <input type="checkbox" id="JavaScript" name="JavaScript" value='2'>
    <label for="JavaScript">JavaScript</label>
  </div>
  <div>
    <input type="checkbox" id="C" name="C" value='3'>
    <label for="C">C</label>
  </div>
  <div>
    <input type="checkbox" id="Java" name="java" value='4' checked>
    <label for="Java">Java</label>
  </div>
</div>

<br>

<button id="3">显示选择value</button>

<script>
  function getValue(idx){return input[idx].value}
  let [b1, b3] = document.querySelectorAll('button')

  b1.addEventListener('click', ()=> {
      alert(`checked 是 ${document.querySelector('#Python').checked}`)
  })
  
  b3.addEventListener('click', ()=> {
    let selectValues = []
    let list = document.querySelectorAll('#lang-choose input:checked')
    for (let checkbox of list) {
      selectValues.push(checkbox.value)
    }
    alert(`选择的value是 ${selectValues}`)
  })  
</script>

textarea

textarea 对应的DOM对象类型是 对应的DOM对象类型是 HTMLTextAreaElement

常用属性有:

  • value

返回/设置 文本框内的输入内容

  • rows/cols

rowscols 属性分别指定 输入框的行数和列数

  • disabled

    返回/设置 是否禁用文本框,被禁用后,就不能输入内容了

  • maxLength/minLength

    对应 maxLength/minLength 属性,也就是最多和最少输入的字符数量

  • placeholder

    对应 placeholder 属性

  • wrap

    返回/设置 一行文字超过文本框宽度时 如何显示,取值为

    • off

      一行文字超过文本框宽度时,不换行, textarea元素出现水平滚动条

    • soft

      一行文字超过文本框宽度时,剩余内容 折到下一行显示,这是缺省值

    • hard

      设置该值时,必须同时指定 cols 属性

      这样,一行文字超过文本框宽度时,浏览器自动插入换行符 (CR+LF),剩余内容 折到下一行显示

  • select()

    全部选中输入框里面的文本

    调用该方法前面通常需要先调用focus方法

  • setSelectionRange(selectionStart, selectionEnd)

    选中指定部分内容,

    参数 selectionStart 指定了选中的开始字符索引, selectionEnd指定了选中的结尾字符索引+1, 索引从0开始计数

    调用该方法前面通常需要先调用focus方法

  • setRangeText(replacement, start, end)

    用新字符串替换输入框中指定部分内容,

    参数 replacement 指定用来替换的字符串

    参数 start, end 是可选参数,

    如果没有 start,end 参数,会替换用户选中部分内容,如果用户没有选中内容,则插入到光标位置

    如果 有 start,end 参数, 分别指定了替换的开始字符索引 和 结尾字符索引+1, 索引从0开始计数。

下面是一个示例



<textarea id="t1" rows="6" cols="30"
>0123456789012345678901234567890123456789

abcdefghijklmnopqrstuvwxyz</textarea>


<br><br>

<button id="1">显示文本</button>
<button id="2">选择全部文本</button>
<button id="3">选中前45个字符</button>
<button id="4">setRangeText('ab')</button>
<button id="5">setRangeText('ab',1,3)</button>
<button id="6">设置行10,列20</button>

<script>
  let [b1,b2,b3,b4,b5,b6] = document.querySelectorAll('button')
  let ta = document.querySelector('#t1')

  b1.addEventListener('click', ()=> {
    alert(`输入框中的内容是${ta.value},替换为 白月黑羽`)
    ta.value = '白月黑羽'
  })

  b2.addEventListener('click', ()=> {
    ta.focus()
    ta.select()
  })

  b3.addEventListener('click', ()=> {
    ta.focus();
    ta.setSelectionRange(0, 45);
  })

  b4.addEventListener('click', ()=> {
    ta.setRangeText('ab');
  })
  
  b5.addEventListener('click', ()=> {
    ta.setRangeText('ab',1,3);
  })
  
  b6.addEventListener('click', ()=> {
    ta.rows=10
    ta.cols=20
  })
</script>

select 和 option

select 对应的DOM对象类型是 HTMLSelectElement

option 对应的DOM对象类型是 HTMLOptionElement

HTMLSelectElement 常用属性、方法有:

  • options 只读

    返回 HTMLOptionsCollection 对象, 里面存放了所有的option对应的 HTMLOptionElement 对象

  • value

    返回/设置 第一个选定 option 元素的value属性。

    值为 空字符串 表示未选择任何元素。

  • selectedIndex

    返回/设置 第一个选定 option 元素的索引数字。

    值为 -1 表示未选择任何元素。

  • disabled

    返回/设置 是否禁用选择框,被禁用后,就不能选择了

  • type 只读

    返回 表示支持多选与否的字符串。 当该select有multiple属性时,返回“select-multiple”; 否则,返回“select-one”

  • add(item, before)

    添加选项,有两个参数

    • item

      新增 HTMLOptionElement 对象 或者 HTMLOptGroupElement 对象

    • before

      表示在哪个索引对应的选项前插入,值为数字,插入到index对应的位置上。

      注意,索引从0开始

      该参数可选,如果没有传入值,或者为一个不存在的index,则新选项会插入到最末尾。

    具体使用,请看下面示例代码

  • remove(index)

    删除选项

    参数index表示要删除选项的位置索引,值为数字

    注意,索引从0开始

HTMLOptionElement 常用属性、方法有:

  • value

    返回/设置 该 option 元素的value属性

  • text

    返回/设置 该 option 元素的 选项文本内容

  • selected

    返回/设置 该 option 元素是否被选择,是为 true,否为 false

  • index 只读

    返回 该 option 元素的索引值


下面是一个示例


<div>选择学科
  <select name="subjects" multiple size="10">
    <option value="C">C</option>
    <option value="Java" selected>Java</option>
    <option value="Javascript">Javascript</option>
    <option value="autotest" selected>自动化测试</option>
    <option value="gui">图形界面</option>
    <option value="webdev" disabled>web开发</option>
  </select>
</div>

<br><br>

<button id="1">首个选中选项</button>
<button id="2">全部选中选项</button>
<button id="3">添加2个选项</button>
<button id="4">删除第2个选项</button>

<script>
  let [b1,b2,b3,b4] = document.querySelectorAll('button')
  let select = document.querySelector('select')

  b1.addEventListener('click', ()=> {
    alert(`首个选中选项index是${select.selectedIndex},
    value是${select.value},`)
  })

  b2.addEventListener('click', ()=> {
    let selectValues = []
    let list = document.querySelectorAll('option:checked')
    for (let option of list) {
      selectValues.push(`${option.text} : ${option.value}`)
    }
    alert(`选择的value是 ${selectValues.join(' | ')}`)
  })

  b3.addEventListener('click', ()=> {
    let opt1 = document.createElement("option");
    let opt2 = document.createElement("option");
    
    opt1.value = "new add value1";
    opt1.text = "新增选项1-末尾";

    opt2.value = "new add value2";
    opt2.text = "新增选项2-第2个";

    select.add(opt1)
    select.add(opt2,1) //索引从0开始
  })

  b4.addEventListener('click', ()=> {
    select.remove(1) //索引从0开始
  })
</script>